从反应路由器3.x移动到4.x.

Question

我怎样才能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 = () =>
  <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);

请参阅以下网址:https://jsfiddle.net/developit/nvpr63eg/

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

Answer 1

我可以通过改变一些东西来配置它与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({
  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在react-router中不再可用,请参阅post来使用历史包.

有关

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

Answer 2

这是Paul S在上面发布的补充答案.信用仍然应该转到保罗发布它.

补充答案的理由是bcoz: -

1. 我在BrowserHistory和Link上遇到错误.
2. 我不得不包括react-router-dom.
3. 是一个错字(在Pauls原始答案)

纱线步骤:

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

的package.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);

Answer 3

应该有一个更接近完整版本的升级指南.我为即将推出的beta而不是当前的alpha修改了代码.测试版还没有发布,所以很遗憾没有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);