使用React路由器和Next JS路由 [英] using React router with Next JS route

问题描述

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

i have simple question , i am new in Next.JS we have a project and my web application manage routes in BackEnd with Next JS

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

now my problem is here , i want use React-Router-dom in one section

例如，在我与Laravel和React合作之前

forexample before im working with Laravel and React

在Laravel中，我将我的路线"设置为这样

in Laravel I set My Route like This

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

然后在反应中使用Clien路线

and then use Clien route with react

但是我不知道如何用Next JS处理它

but i dont know how handle this with Next JS

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

( more details => for example i want user click to some link after that user see a page with some link inside of them , if user click that link , react-router-dom handle route and no any request send to Server )

推荐答案

我建议使用Next路由器.您确实需要创建一个自定义服务器以过载默认的Next路由，但这是一项琐碎的任务:

I would recommend using the Next router. You do need to create a custom server in order to overload the default Next routing, but its a trivial task:

// 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文件中完成的:

Then you can define routes, which I do in the routes.js file:

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

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

这篇关于使用React路由器和Next JS路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！