Question

尝试从react-dom版本1迁移到v4。

由于较旧的react-router版本使用嵌套路由，因此在v4中有点反直觉，因为你基本上可以将<Route />放在任何地方。从官方的v4文档来看，似乎还不清楚如何迁移这篇文章 - {this.props.children}，因为它使用历史组件来使用URL的哈希部分。我以为我必须使用<Router history={history}></Router>才能让它在第4版中运行。但是，在这种情况下，<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中，它是一个历史记录，一个与react-router一起安装的独立包。

希望节省一些时间和

这是来自FrançoisZaninotto=＆gt;的一个很好的资源。 React Router v4 Unofficial Migration Guide

如何从react-router v1迁移到v4？ {} this.props.children

0 个答案: