将 React 路由器与 Next JS 路由一起使用

IT技术 javascript reactjs next.js react-router-v4
2021-05-25 09:48:06

我有一个简单的问题,我是 Next.JS 的新手,我们有一个项目,我的 Web 应用程序使用 Next JS 管理后端中的路由

现在我的问题在这里,我想在一节中使用 React-Router-dom

例如在我使用 Laravel 和 React 之前

在 Laravel 我这样设置我的路线

 Route::get('/reactPage/*' ...)

然后在react中使用 Clien 路线

但我不知道如何用 Next JS 处理这个问题

(更多详细信息 => 例如,我希望用户在该用户看到其中包含一些链接的页面后单击某个链接,如果用户单击该链接,则 react-router-dom 处理路由并且没有任何请求发送到服务器)

1个回答

我建议使用 Next 路由器。您确实需要创建一个自定义服务器以重载默认的 Next 路由,但这是一项微不足道的任务:

// server.js
const { createServer } = require('http');
const next = require('next');
const routes = require('./routes');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handler = routes.getRequestHandler(app);

app.prepare().then(() => {
    createServer(handler).listen(port, err => {
        if (err) {
            throw err;
        }
        console.log(`> Ready on http://localhost:${port}`);
    });
});

然后你可以定义路由,我在 routes.js 文件中这样做:

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

routes
    .add('landing', '/')
    .add('profile', '/profile', 'profile');