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

创建如下所示的route.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中的路由器

1 个答案: