reactjs - Nextjs 中的路由器

Question

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

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

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

    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)
  })