使用Node JS的React Router

时间:2018-08-29 23:25:01

标签: node.js reactjs routing react-router react-router-dom

使用React-Router时,您只能将原始index.html与Node一起提供,因为客户端会处理其余部分。我了解一旦用户进入主页,如何在不同页面之间进行路由。但是,假设用户在URL中输入“ / about”。 Node将提供index.html,但是如何告诉React-Router立即将用户带到About页面?谢谢。

2 个答案:

答案 0 :(得分:0)

您必须像这样定义与“ / about”匹配的路线:

在您的主应用中:

import {
    BrowserRouter as Router,
    Switch
} from 'react-router-dom';

...

render() {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/about" component={About}/>
                <Route component={NotFound}/>
            </Switch>
        </Router>
    );
}

基本上,您可以根据需要添加任意数量的路由,并且只要它们与路由中定义的确切路径匹配,React Router就会处理它们。

我添加的最后一条路由将匹配任何不匹配的路由,例如,如果用户键入URL'/ MyInventedPath'或任何其他404(未找到)。

Official documentation非常好,并且易于遵循,因此您可以了解它的工作原理以及如何使用其他组件。

答案 1 :(得分:0)

如果您的BUILT create-react-app项目位于节点/公用文件夹中。您需要让express知道index.html文件将处理路由。请参阅下面的超级简单服务器示例。这将正确使用反应路由器设置。

const express = require('express');

const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));
app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'public/index.html')));

app.listen(3000);