ReactJS 路由器正在覆盖 ExpressJS 路由器答案

【问题标题】：ReactJS Router is overriding ExpressJS routerReactJS 路由器正在覆盖 ExpressJS 路由器
【发布时间】：2017-12-16 09:15:00
【问题描述】：

我遇到了非常有趣的问题。我的 React JS 根文件有多个路由器：

render() {
    return (
        <div className="container body">
                <Route exact path="/" component={<IndexPage/>} />
                <Route exact path="/users" component={<Users/>} />
                <Route exact path="/users/:userId" component={<User/> }/>
                <Route exact path="/routers" component={<Routers/>} />
        </div> 
    );
}

我根据路由生成组件。然后我通过 webpack 将我的反应组件构建为单个 javascript 文件。

现在我正在尝试通过 ExpressJS 显示 React 页面，如下所示：

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

// This is location where generated Webpack files are located
app.use(express.static(__dirname + '/../build'));

app.get('/api/hello', (req, res) => {
    res.json({hello: 'world'})
});

// This is how I render React based pages
app.get(['/', '/users', '/routers'], (req, res) => {
    res.sendFile(__dirname + '/../build/index.html');
});

app.listen(9000);

当我通过浏览器打开 /、/users、/routers 路径时，它会显示正确的 React 组件。

但是，当我尝试打开/api/hello 时，它仍然在尝试生成不存在的 React 组件，而不是显示 JSON 响应！

如何停止让 React 的路由器覆盖 Express 的路由器？

==================更新=====================

我找到了有趣的解决方案。当我通过 POSTMAN 发出 api/hello 请求时，它向我显示了 JSON 响应。

这意味着 ReactJS 在浏览器级别有自己的 CACHING，这使它看起来像是覆盖路由。

【问题讨论】：

标签： javascript node.js reactjs express react-router

【解决方案1】：

我找到了有趣的解决方案。当我通过 POSTMAN 发出 api/hello 请求时，它向我显示了 JSON 响应。

这意味着 ReactJS 在浏览器级别有自己的 CACHING，这使它看起来像是覆盖路由。

【讨论】：

非常感谢。我整天都在挠头。