React JS: мое приложение работает правильно?

Question

Я сделал ссылку на простое приложение http://todo -app.myartsonline.com /

Для навигации я использовал библиотеку Reaction-router-DOM

Это прекрасно работает, но я сомневаюсь, когда мы идем в Приложение и нажимаем Инструкция Это прекрасно работает, теперь попробуйте эту ссылку http://todo -app.myartsonline.com / Инструкция это приведет к ошибке, Очевидно, что возникает ошибка, потому что приложение еще не загружено!

Это проблема / проблема, если да, то как ее решить. Как я могу отобразить напрямую

Навигационный код My React

    import { Router, Route} from "react-router-dom";
    import history from './history.js';

    <Router history={history}>

    <Container fluid>

        <NavbarComponent />

          <Route path="/" exact component={Home} />
          <Route path="/Streams/list" exact component={StreamList} />
          <Route path="/Streams/new" exact component={StreamCreate} />
          <Route path="/Streams/edit" exact component={StreamEdit} />
          <Route path="/Streams/delete" exact component={StreamDelete} />
          <Route path="/Streams/show/:id" exact component={StreamShow} />
          <Route path="/Instruction" exact component={Instruction} />
          <Route path="/AboutProj" exact component={AboutProj} />
    </Container>

  </Router>

Вот мой History.js

    var createHistory = require('history').createBrowserHistory;
     export default createHistory();

Answer 1

Я предполагаю, что вы используете browserHistory.

Когда вы переходите по этой ссылке http://todo-app.myartsonline.com/Instruction, ваш сервер не возвращает index.html, поэтому реагирующий маршрутизатор не входит в игру.Но когда вы переходите на http://todo-app.myartsonline.com/ и затем направляетесь на instruction, это маршрутизация на стороне клиента, сервер не знает об этом маршруте.

Для корректной работы истории браузера вам необходимо иметь конфигурацию на стороне сервера.Для всего запроса отправьте index.html в ответ.Это должно быть последним в порядке запросов.

1) Настройка Express: -

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'))
})

2) Настройка WebpackDevServer

devServer: {
  historyApiFallback: true
}

Надеюсь, это поможет !!!