使用具有Next JS路由的React路由器

时间:2018-05-01 12:36:45

标签: javascript reactjs react-router-v4 next nextjs

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

现在我的问题在这里,我想在一个部分使用React-Router-dom

例如在使用Laravel和React

之前

在Laravel我设置My Route就像这个

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

然后使用Clien route with react

但我不知道如何处理Next JS

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

1 个答案:

答案 0 :(得分: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}`);
    });
});

然后,您可以定义路由,这是在route.js文件中完成的:

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

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