Как перейти с реакции-маршрутизатора v1 на v4? {} this.props.children - PullRequest
Новая
       13

Как перейти с реакции-маршрутизатора v1 на v4? {} this.props.children

0 голосов
/ 02 мая 2018

Пытался перейти с реакции-версии 1 на v4.

Поскольку в более старых версиях реакции-маршрутизатора использовались вложенные маршруты, в версии 4 это немного противоречит интуиции, поскольку в принципе вы можете поместить <Route /> с повсюду. И из официальных документов v4 может показаться неясным, как перенести этот фрагмент - {this.props.children}, поскольку он использует компонент истории для использования хэш-части URL. Я думал, что должен использовать <Router history={history}></Router>, чтобы заставить его работать в v4. Тем не менее, <HashRouter></HashRouter> это путь с v4 в этом случае. Проверьте это ниже.

Итак, чтобы дать вам быстрый пример, вот что я имел в v1:

v1. 

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link } from "react-router";
import Index from './components/Index';

class App extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

let documentReady = () => {
  const reactNode = document.getElementById('react');
  if(reactNode){
    ReactDOM.render(
      <Router history={history}>
        <Route component={App}>
          <Route path='/', component={Index} />
        </Route>
      </Router>
      , reactNode);
  }
};

$(documentReady)

А вот рабочий пример

v4. 

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route, Switch, Link } from 'react-router-dom';
import Index from './components/Index';

class App extends React.Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/" component={Index} />
        </Switch>
      </div>
    )
  }
}

let documentReady = () => {
  const reactNode = document.getElementById('react');
  if(reactNode){
    ReactDOM.render(
      <HashRouter>
        <Route component={App} />
      </HashRouter>
      , reactNode);
  }
};

$(documentReady)

Обратите внимание, что вы должны импортировать HashRouter вместо Router v4, тогда как в v1 это был History, отдельный пакет, который должен быть установлен вместе с response-router.

Надеюсь, это сэкономит кому-то время и

Вот замечательный ресурс от Франсуа Занинотто => Неофициальное руководство по миграции React Router v4

...