Маршрутизатор React не работает на экспресс-сервере

Я новичок в реакции, и я пытаюсь создать чат-приложение с его помощью. Я использовал response-router для загрузки различных компонентов в соответствии с URL-адресом. В моем ответном проекте foler (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')
);
...

Он работает, когда я запускаю его в папке реагирования с помощью «npm start». Но когда я запускаю «npm run build» и обслуживаю статические файлы с экспресс-сервером, он может обслуживать только страницу приложения по пути '/', а для путей '/ customer' и '/ support /: support_id' загружается ничего такого.

В папке экспресс-сервера я загружаю статические файлы следующим образом:

сервер / 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/')});
});
...

Любая помощь будет оценена по достоинству!


reactjs node.js javascript router static-files
person Hiber    schedule 08.07.2018    source источник

Ответы (5)


arrow_upward
38
arrow_downward

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/')});
});
person Tholle    schedule 08.07.2018
comment
Это единственный правильный ответ из десятков, связанных с этой самой проблемой. Другие игнорируют папку static, в результате чего вместо css, фрагментов и т. Д. Обслуживается index.html. @Hiber, пожалуйста, примите это как ответ. - person basse; 25.11.2018
comment
Как сказал @basse, я столкнулся с этой проблемой в Node.js + Koa + React и решил с этим ответом. - person M_YK; 05.01.2020
comment
Трудно объединить, когда мы хотим объединить Express и React Router в один проект. На мой взгляд, будьте осторожны, ставя звездочку, как указано выше, потому что это может быть связано с URL-адресами вашего сервера. Лучше, если мы определим URL-адреса клиентов по конкретному имени, например / home / dasdboard / login / logout ... и т. Д. - person Thịnh Kều; 24.01.2020
comment
С этим решением у меня, похоже, все еще есть проблема, что index.html обслуживается вместо css и файлов фрагментов, но только из вторичных подмаршрутов (т.е. host:port/route работает, но host:port/route/subroute нет - страница пуста, а все ресурсы css и js - это просто html снова, обслуживаемый из `host: port / route / static /‹ css | js ›/ filename.‹ css | js ›.). Есть идеи, почему это происходит? - person Seth Lutske; 21.04.2021

arrow_upward
1
arrow_downward

Вы должны обслуживать статические файлы и обрабатывать любые запросы в вашем 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);
person Nicolai Pefaur Zschoche    schedule 30.06.2020

arrow_upward
0
arrow_downward

* работал вместо использования / в app.get (), иначе он всегда будет показывать, что невозможно получить. Спасибо @basse

person Sarang Kartikey    schedule 14.07.2019
comment
Этой дополнительной информации недостаточно, чтобы дать ответ. Это практически просто спасибо. что не является ценным вкладом в набор пар вопросов и ответов, к которому стремится StackOverflow. Пожалуйста, отредактируйте, чтобы повысить полезность этого ответа, или превратите его в комментарий (как только вы наберете достаточно репутации meta.stackexchange.com/questions/214173/) - person Yunnosch; 14.07.2019

arrow_upward
0
arrow_downward

Избавление от этого блока помогло мне

app.use(function(req, res, next) {
  next(createError(404));
});
person Premo89    schedule 31.07.2020

arrow_upward
0
arrow_downward 

app.get("/get/data/from/store", (req, res) => {
             your sql codes here
  });

// Вы должны разместить все указанные выше вызовы REST API перед приведенными ниже кодами. // В противном случае все URL-адреса '*' будут перенаправлены на index.html

// подстановочный знак обрабатывает любые запросы, которые не соответствуют запросам ВЫШЕ

app.use (express.static (path.join (__ dirname, '/ build')))

    app.get('*', (req, res) => {
      res.sendFile(path.resolve(__dirname+'/build/','index.html'));
    });
    app.listen(port, () => {
      console.log("Server running on port ", port);
    });
    
    put the wildcard app.get('* call at the end. Just before the app.listen.
person Fernando Francis    schedule 30.06.2021