javascript - ReactJS 路由器正在覆盖 ExpressJS 路由器

Question

我遇到了一个很有趣的问题。我的 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 将我的 react 组件构建为单个 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 在浏览器级别有自己的缓存，这使得它看起来像是覆盖路由。

Answer 1

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

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