Переход с реактивного маршрутизатора 3.x на 4.x

Я смог настроить его с помощью редукса, изменив несколько вещей:

Во-первых, browserHistory больше не определен в react-router. Один из способов вернуть его — использовать пакет history.

Вам нужно будет установить (редукс опционально):

npm i -S history react-router react-router-redux

Вместо того, чтобы пытаться импортировать browserHistory, используйте:

import { createBrowserHistory } from 'history';

Если вы хотите использовать редукцию, импортируйте это и добавьте в свои комбинированные редукторы:

import { routerReducer as routing } from 'react-router-redux';

combineReducers({
  home, about,
  routing, // new
});

Затем вы создаете объект history

// redux
import { syncHistoryWithStore } from 'react-router-redux';
const history = syncHistoryWithStore(createBrowserHistory(), store);

// regular
const history = createBrowserHistory();

Затем измените свой маршрутизатор, чтобы использовать новый объект history.

<Router history={ history } children={ Routes } />

Все остальное должно быть таким же.

Если кто-то столкнется с The prop history is marked as required in Router, but its value is undefined.

Это связано с тем, что browserHistory больше не доступен в реагирующем маршрутизаторе, см. сообщение, чтобы использовать пакет истории вместо этого.

Связанный

• Github ts-react-redux-startup: проект, который его использует
• Миграция на React Router 4 с помощью Redux< /а>

Это дополнительный ответ на ответ Пола С., опубликованный выше. Кредит все равно должен перейти к Полу за его публикацию.

Причина m, дополняющая ответ, bcoz: -

1. Я получил ошибки с BrowserHistory и Link.
2. Мне пришлось включить react-router-dom.
3. была опечатка (в оригинальном ответе Пауля)

шаги пряжи:

yarn add react-router
yarn add react-router-dom

пакет.json:

 "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1"

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Redirect, Route} from 'react-router';
import {BrowserRouter, Link} from 'react-router-dom';


//let { BrowserRouter, Switch, Redirect, Route, Link } = ReactRouter;

const Main = () =>
  <BrowserRouter>
    <App>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/map' component={Map}/>
        <Route path='/settings' component={Settings}/>
        <Route path='/foo' component={Foo}/>
        <Route component={NotFound}/>
      </Switch>
    </App>
  </BrowserRouter>

const App = props =>
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const Foo = () => <Redirect to='/' />
const NotFound = (props) => <h1>404 - Not Found</h1>

ReactDOM.render(<Main />, document.body);

Ближе к полной версии должно быть руководство по обновлению. Я адаптировал ваш код для предстоящей бета-версии вместо текущей альфы. Бета-версия еще не выпущена, поэтому, к сожалению, нет размещенной версии React Router, с помощью которой вы сможете это протестировать.

let { BrowserRouter, Switch, Redirect, Route, Link } = ReactRouter;

const Main = () =>
  <BrowserRouter>
    <App>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/map' component={Map}/>
        <Route path='/settings' component={Settings}/>
        <Route path='/foo' component={Foo}/>
        <Route component={NotFound}/>
      </Switch>
    </App>
  </BrowserRouter>

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    {props.children}

  </div>

const Navigation = props => <nav {...props} />
const Home = () => <h1>Home</h1>
const Map = () => <h1>Map</h1>
const Settings = () => <h1>Settings</h1>
const Foo = () => <Redirect to='/' />
const NotFound = (props) => <h1>404 - Not Found</h1>

ReactDOM.render(<Main />, document.body);

Вы, конечно, можете, но вам нужно будет переписать некоторые из ваших компонентов и логику приложения, потому что ваш код не будет работать так, как сейчас.

Ознакомьтесь с официальной документацией здесь. Также есть хороший FAQ об этих изменениях, здесь. Вот отрывок:

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>
    {props.children}
  </div>

  <Match exactly pattern="/" component={Home} />
  <Match pattern="/map" component={Map} />
  <Match pattern="/settings" component={Settings} />
  <Match pattern="/topics" component={Topics} />

В недавнем выпуске v4 следует отметить несколько моментов, касающихся вашего jsfiddle. Во-первых, библиотека в целом была разделена: веб, нативная и базовая (используйте где угодно). Используйте react-router-dom только для Интернета.

2: Способ вложения маршрутов совершенно другой. Вместо того, чтобы вкладывать маршруты в ваш родительский компонент, что вы на самом деле не можете сделать, все, что вам нужно сделать, это определить свой родительский компонент (в данном случае BrowserRouter), а затем вы можете свободно определять маршруты для своих компонентов. Теперь ваши компоненты определяют иерархию. Например, вы можете организовать компоненты Main и App следующим образом:

const Main = () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

const App = props => (
  <div>
    <Navigation>
      <Link to='/'>Home</Link>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    <Route exact path='/' component={Home}/>
    <Route path='/map' component={Map}/>
    <Route path='/settings' component={Settings}/>
    <Route path='/foo' render={() => (
        <Redirect to="/"/>
    )}/>
  </div>
)

Надеюсь это поможет. Пожалуйста, взгляните на мое исправление для вашего jsfiddle ниже и дайте мне знать, если у вас есть какие-либо вопросы.

https://jsfiddle.net/bagofcole/kL6m8pjk/12/

Для получения дополнительной информации посетите: https://reacttraining.com/react-router/web/guides/quick-start