React路由器在快速服务器上不起作用 [英] React router doesn't work on express server

问题描述

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

 import {BrowserRouter as Router, Route} from 'react-router-dom';...ReactDOM.render(<路由器><div><路由精确路径='/' component={App}/><Route path='/customer' component={CustomerPage}/><Route path='/support/:support_id' component={SupportPage}/>

</路由器>,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);...

server/routes/index.js:

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

任何帮助将不胜感激！

解决方案

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/')});});

I am new to react, and I am trying to build a chat-app with it. I used react-router to load different components according to the url. In my react project foler (client/src/index.js), the code is as follows:

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')
);
...

It works find when I start it in the react folder with "npm start". But when I run "npm run build" and serve the static files with express server, it can only serve the App page in the '/' path, while for '/customer' and '/support/:support_id" path, it loads nothing.

In the express server folder, I load the static files in the following way:

server/app.js:

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

server/routes/index.js:

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

Any help will be appreciated!

解决方案

React Router does all the routing in the browser, so you need to make sure that you send the index.html file to your users for every route.

This should be all you need:

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/')});
});

这篇关于React路由器在快速服务器上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！