时间戳

首页 > 解决方案 > 手动输入 URL 时，MERN 路由器链接不起作用

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

问题描述

我将我的 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，它就不起作用。只有当我输入链接时它才会这样做。如果我通过我的应用重定向到达该路径，那么它可以工作。

标签： javascriptnode.jsreactjsherokureact-router

解决方案

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

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

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

HashRouter更容易使用，因为它#在 URL 中插入了一个，有效地将所有页面请求发送到相同的基本路由，而服务器不需要做任何特殊的事情。

推荐阅读