从反应路由器 3.x 移动到 4.x [英] Moving from react router 3.x to 4.x

问题描述

我如何从使用 https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js 转向使用 代码>https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js?

以下使用 3.x 的示例.

HTML

<script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script><script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js"></script>

JS

let { Router, IndexRoute, Redirect, Route, Link, browserHistory } = ReactRouter;history.replaceState(0,0,'/');const Main = () =><路由器历史={browserHistory}><Route path='/' component={App}><IndexRoute 组件={Home}/><Route path='map' component={Map}/><Route path='settings' component={Settings}/><重定向 from='foo' to='/'/><Route path='*' component={NotFound}/></路线></路由器>const App = 道具 =><div><导航><Link to='/map'>Map</Link><Link to='/settings'>设置</Link><Link to='/foo'>Foo</Link></导航>{props.children}

const 导航 = 道具 =><nav {...props}/>const Home = () =><h1>主页</h1>const Map = () =><h1>地图</h1>const 设置 = () =><h1>设置</h1>const NotFound = (props) =><h1>404 - 未找到</h1>ReactDOM.render(

, document.body);

在以下位置查看它的实际效果:https://jsfiddle.net/developit/nvpr63eg/

如果我移动到任何 CDN 托管的 4.x 版本，尽管它不起作用(返回语句后无法访问代码).

解决方案

我能够通过更改一些内容来使用 redux 对其进行配置:

首先，browserHistory 不再定义在 react-router 上.取回它的一种方法是使用包 history.

您需要安装(redux 可选):

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

不要尝试导入 browserHistory 使用:

import { createBrowserHistory } from 'history';

如果您想使用 redux，请导入它并将其添加到您的组合减速器中:

import { routerReducer as routing } from 'react-router-redux';combineReducers({家，关于，路由，//新});

接下来创建history对象

//还原从'react-router-redux'导入{syncHistoryWithStore}；const history = syncHistoryWithStore(createBrowserHistory(), store);//常规的const 历史 = createBrowserHistory();

然后更改您的路由器以使用新的history 对象

其他一切都应该是一样的.

<小时>

如果遇到prop history在Router中被标记为required，但其值未定义.

这是因为 browserHistory 在 react-router 中不再可用，请参阅帖子以使用历史包.

<小时>

相关

• Github ts-react-redux-startup:项目使用它
• 迁移到 React Router 4使用 Redux

How can I move to using https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js from using https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js?

Example using 3.x below.

HTML

<script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js"></script>

JS

let { Router, IndexRoute, Redirect, Route, Link, browserHistory } = ReactRouter;

history.replaceState(0,0,'/');

const Main = () =>
  <Router history={browserHistory}>

    <Route path='/' component={App}>
      <IndexRoute component={Home}/>
      <Route path='map' component={Map}/>
      <Route path='settings' component={Settings}/>
            <Redirect from='foo' to='/' />
      <Route path='*' component={NotFound}/>
    </Route>

  </Router>

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 NotFound = (props) => <h1>404 - Not Found</h1>

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

See it in action at: https://jsfiddle.net/developit/nvpr63eg/

If I move to any of the CDN hosted 4.x versions though it doesn't work (unreachable code after return statement).

解决方案

I was able to configure it with redux by changing a few things:

First, browserHistory is not defined on react-router anymore. One way to get it back is to use the package history.

You will need to install (redux optional):

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

Instead of trying to import browserHistory use:

import { createBrowserHistory } from 'history';

If you want to use redux then import this and add it to your combined reducers:

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

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

Next you create the history object

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

// regular
const history = createBrowserHistory();

Then change your router to use the new history object

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

Everything else should be the same.

---

If anyone runs into The prop history is marked as required in Router, but its value is undefined.

It is because browserHistory is no longer available in react-router, see post to use history package instead.

---

Related

• Github ts-react-redux-startup: Project that uses it
• Migrating to React Router 4 with Redux

这篇关于从反应路由器 3.x 移动到 4.x的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！