React路由器在快速服务器上不起作用

IT技术 javascript node.js reactjs router static-files
2021-05-12 05:01:59

我是新手，我正在尝试用它构建一个聊天应用程序。我使用 react-router 根据 url 加载不同的组件。在我的react项目文件夹（client/src/index.js）中，代码如下：

import {BrowserRouter as Router, Route} from 'react-router-dom';    
...
ReactDOM.render(
  <Router>
    <div>
      <Route exact path='/' component={App} />
      <Route path='/customer' component={CustomerPage} />
      <Route path='/support/:support_id' component={SupportPage} />
    </div>
  </Router>,
  document.getElementById('root')
);
...

当我在 react 文件夹中使用“npm start”启动它时，它会起作用。但是当我运行“npm run build”并使用 express 服务器提供静态文件时，它只能在“/”路径中提供应用程序页面，而对于“/customer”和“/support/:support_id”路径，它会加载没有什么。

在 express 服务器文件夹中，我通过以下方式加载静态文件：

服务器/app.js：

...
var indexRouter = require('./routes/index');
app.use('/static', express.static(path.join(__dirname, '../client/build//static')));
app.use('/', indexRouter);
...

服务器/路由/index.js：

...
router.get('/', function(req, res) {
  res.sendFile('index.html', {root: path.join(__dirname, '../../client/build/')});
});
...

任何帮助将不胜感激！

4个回答

React Router 在浏览器中完成所有路由，因此您需要确保将index.html文件发送给每个路由的用户。

这应该就是你所需要的：

app.use('/static', express.static(path.join(__dirname, '../client/build//static')));
app.get('*', function(req, res) {
  res.sendFile('index.html', {root: path.join(__dirname, '../../client/build/')});
});

您必须在 index.js 中提供静态文件并处理任何请求：

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

const app = express();

// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));

// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

console.log('App is listening on port ' + port);

*工作而不是/在 app.get()中使用，否则它将始终显示无法获取。谢谢@basse

摆脱这个障碍对我有帮助

app.use(function(req, res, next) {
  next(createError(404));
});
其它你可能感兴趣的问题
上一篇如何在 p5.js 中使用 React 下一篇MakerBot Replicator 1 电压调节器修复