手动输入 URL 时，MERN 路由器链接不起作用

Question

我将我的 MERN 堆栈应用程序部署到 heroku，但当我手动输入 url 路径时，路由器路径不起作用。 这是我的节点服务器：

const express = require('express');
const path = require('path');
const connectDB = require('./config/db');
const app = express();
// //connect DB
connectDB();
app.use('/api/poll', require('./routes/api/poll'));
if(process.env.NODE_ENV === 'production'){
app.use(express.static( 'client/build' ));
app.get('*', () => {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html')); //relative path
});
}
const PORT = process.env.PORT || 5000
app.listen(PORT, () => console.log(`Server started ${PORT}`));

这是路由器的反应：

<Router>
<Fragment>
<Navbar />
<Switch>
<Route exact path="/" component={Landing} />
<Route exact path="/create" component={CreatePoll} />
<Route exact path="/search" component={Search} />
<Route exact path="/404" component={NoMatch} />
<Route exact path="/:id" component={Poll} />
<Route exact path="/:id/results" component={Results} />
</Switch>
<NotificationContainer />
</Fragment>
</Router>

基本上，如果我在浏览器 url 中输入路径名，例如 baseUrl/poll/vote，它不起作用。只有当我输入链接时，它才会这样做。如果我通过我的应用程序重定向到达该路径，那么它就可以工作。

Answer 1

Router需要是HashRouter的实例，而不是BrowserRouter。

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

BrowserRouter需要在后端进行特殊配置和考虑，以处理对路由的网络请求，而实际上这些路由应该由前端处理。

HashRouter更易于使用，因为它在 URL 中插入了一个#，有效地将所有页面请求发送到同一基本路由，而无需服务器执行任何特殊操作。