Nextjs 中的路由器

Question

我正在对使用 ReactJS+Typescript 构建的现有应用程序进行更改，并且我一直在将其与 Typescript 一起迁移到 NextJs。

如何更改路由器？我查看了 Nextjs 的文档，但我感到很困惑。

目前路由在我的 App.tsx 文件中。这是代码。我想进行更改，因为当时我单击 handleSave 时，我的博客 post 没有被保存。我认为问题出在路由上。

    return (
      <div className="All-Routes">
        <Switch>
          <Route
            exact
            path="/"
            component={props => <Index {...props} posts={this.state.posts} />}
          />
          <Route
            path="/posts/:id"
            component={props => (
              <Data {...props} post={this.state.posts[props.match.params.id]} />
            )}
          />
          <Route
            exactpath="/new"
            component={props => <Saving {...props} onSave={this.handleSave} />}
          />
        </Switch>
        <LocationDisplay />
      </div>
    );
  }
}
export default App;

Answer 1

创建一个 routes.js 文件，如下所示：

const nextRoutes = require('next-routes')
const routes = (module.exports = nextRoutes())

routes.add('/', 'index')

并用 expressjs 编写一个 server.js 并添加以下行：

const routes = require('./routes')
const handler = routes.getRequestHandler(app)
...
server.get('*', (req, res) => {
    handler(req, res, parsedUrl)
  })

Nextjs 中的路由器

Routers in Nextjs

debugging

typescript

reactjs

react-router

next.js