От реакции-роутер 3 до 4

Question

Я довольно новичок в React и столкнулся с этой проблемой с помощью учебника, в котором мне нужно преобразовать реагирующий маршрутизатор из v.3 в v.4. Мой текущий код выглядит так:

app.js

<Router history={browserHistory} routes={routes} />

routes.js

const routes = {
  component: Base,
  childRoutes: [

    {
      path: '/',
      component: HomePage
    }....

base.js

const Base = ({ children }) => (
  <div>
    <div className="top-bar">
      <div className="top-bar-left">
        <IndexLink to="/">React App</IndexLink>
      </div>

      <div className="top-bar-right">
        <Link to="/login">Log in</Link>
        <Link to="/signup">Sign up</Link>
      </div>

    </div>

    {children}

  </div>
);

Base.propTypes = {
  children: PropTypes.object.isRequired
};

export default Base;

Как мне конвертировать это в версию 4? Я пытался с этим, но это не сработало, как ожидалось.

 <HashRouter>
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/about" component={AboutPage} />
    </Switch>
  </HashRouter>

Answer 1

Вот пример, который я обещал. Довольно понятно, так как я добавил комментарии в JS. Конечно, вы можете разделить это на разные файлы и т. Д., Но для простоты этот пример можно быстро развернуть в текущем проекте, чтобы посмотреть, как он работает. Дайте мне знать, если у вас есть дополнительные вопросы.

Убедитесь, что вы установили React (последний будет хорошо) и React-Router 4,

import React from 'react'
import { render } from 'react-dom'
import {
  BrowserRouter,
  Link,
  Route,
  Switch,
} from 'react-router-dom'

// Mock components
const Home = () => <div>Homepage</div>
const About = () => <div>About Page</div>

// This is the routes array, which is
// a index of objects that have a component
// property and a path
const Routes = [
  {
    component: Home,
    path: '/home'
  },
  {
    component: About,
    path: '/about'
  }
]

// This is where we map our routes array
// as a Route component with the properties
// within the object that we created
// ------
// There's a mock navigation bar in here aswell
render((
  <BrowserRouter>
    <div>
      <div>
        <Link to='/home'>Home</Link>
        <Link to='/about'>About</Link>
      </div>
      <Switch>
        {Routes.map(route => <Route exact path={route.path} component={route.component} />)}
      </Switch>
    </div>
  </BrowserRouter>
), document.getElementById('root'));

Answer 2

Я создал библиотеку реагирующий маршрутизатор-4-compat, чтобы помочь перейти с реагирующего маршрутизатора v3 на v4. Он работает как v3, но на основе v4. Так что он может работать с v4 и настроить как v3. Вам не придется менять много кода, чтобы обновить ваш проект с v3 до v4. Эта библиотека все еще находится в стадии разработки, но в большинстве случаев будет работать.