React Router: загрузка неиндексированного маршрута с помощью babel-standalone - PullRequest
Новая
       5

React Router: загрузка неиндексированного маршрута с помощью babel-standalone

0 голосов
/ 22 апреля 2019

Я пытаюсь создать приложение React, используя babel-standalone вместо правильной транспонирования Babel (чтобы пользователям, не являющимся узлами, было проще настраивать их без необходимости переноса).

Вот мои настройки (вам придется запускать их локально из-за изолированной среды StackOverflow): 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/react-router@3.2.0/umd/ReactRouter.js'></script>
    <script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
  </head>
  <body>
    <div id='root'></div>
    <script type='text/babel'>
      const App = props => (
        <ReactRouter.Router history={ReactRouter.browserHistory}>
          <ReactRouter.Route path='/' component={A} />
          <ReactRouter.Route path='/b' component={B} />
        </ReactRouter.Router>
      )

      const Link = ReactRouter.Link
      const A = props => <h1><Link to='/b'>Link to B</Link></h1>
      const B = props => <h1>Welcome to B</h1>

      ReactDOM.render(<App />, document.querySelector('#root'));
    </script>
  </body>
</html>

Это прекрасно работает для связи от компонента A до B. Однако, если я ссылаюсь на B, а затем обновляю страницу, я получаю 404 со своего статического сервера. Есть ли способ исправить это так, что маршрут B будет загружаться, если пользователь запрашивает host_address/b? Любые предложения будут очень полезны!

1 Ответ

0 голосов
/ 22 апреля 2019

Я достаточно счастлив, используя аргумент hashHistory для history, который хранит все маршруты в /#/ и поэтому позволяет обновлять: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/react-router@3.2.0/umd/ReactRouter.js'></script>
    <script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
  </head>
  <body>
    <div id='root'></div>
    <script type='text/babel'>
      const App = props => (
        <ReactRouter.Router history={ReactRouter.hashHistory}>
          <ReactRouter.Route path='/' component={A} />
          <ReactRouter.Route path='/b' component={B} />
        </ReactRouter.Router>
      )

      const Link = ReactRouter.Link
      const A = props => <h1><Link to='/b'>Link to B</Link></h1>
      const B = props => <h1>Welcome to B</h1>

      ReactDOM.render(<App />, document.querySelector('#root'));
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...