19

https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js我怎样才能从 using转向using 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 版本，尽管它不起作用（返回语句后无法访问代码）。

4

5 回答 5

14

通过更改一些内容，我可以使用 redux 对其进行配置：

首先，browserHistory不再定义react-router。取回它的一种方法是使用 package 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 中不再可用，请参阅帖子以使用 history 包。

有关的

于 2017-03-17T22:59:09.070 回答
7

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

补充答案的原因是bcoz：-

  1. 我的 BrowserHistory 和 Link 出现错误。
  2. 我必须包括 react-router-dom。
  3. 是一个错字（在保罗的原始答案中）

纱线步骤：

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

包.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);

在此处输入图像描述

于 2017-06-16T07:58:56.587 回答
6

应该有一个更接近完整版本的升级指南。我为即将到来的测试版而不是当前的 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);
于 2017-01-17T15:48:58.363 回答
0

你当然可以，但是你需要重写你的一些组件和应用程序逻辑，因为你的代码不会像现在这样运行。

在此处阅读官方文档。关于这些更改还有一个很好的常见问题解答，请点击此处。这是一段摘录：

为什么会有这么大的变化？

tl; dr声明性可组合性。

我们从未对 React Router 如此兴奋。和你一样，自从我们第一次接触 React 以来，我们已经学到了很多关于 React 的知识。我们在此过程中尽我们所知构建了一个路由器。我们学到的最多的是，我们喜欢 React 是因为它的声明式可组合性。

根据官方消息，如果要升级，很快就会有升级指南：

我们非常相信应用程序的迭代迁移，而不是重写。我们正在制定迁移指南，但基本策略是两个版本可以串联运行（由于 npm 限制，我们将单独发布以前的版本，以便可以安装两者）。

您将能够一个接一个地采用路由并将它们迁移到新的 API。此外，上面提到的配置插件在这里可能会有所帮助。

考虑到这一点，回到你原来的问题：为了让你的App组件正常运行，它现在应该看起来像：

const App = props => 
  <div>
    <Navigation>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>
    {props.children}
  </div>

  <Match exactly pattern="/" component={Home} />
  <Match pattern="/map" component={Map} />
  <Match pattern="/settings" component={Settings} />
  <Match pattern="/topics" component={Topics} />

希望这可以帮助。祝你好运。

编辑：显然@PaulS 有一个未来版本的 React-Router v4 的示例。如果帖子准确，以后上面的代码就不行了；它仅适用于当前可用的版本。当 RRv4 上线时，请留意上面的链接页面以获取信息。

于 2017-01-17T15:49:10.880 回答
0

关于您的 jsfiddle，最近发布的 v4 有几件事情需要注意。首先是整个库已经分离：web、native 和 core（在任何地方使用）。仅对 web 使用 react-router-dom。

2：嵌套路由的方式完全不同。无需在父组件中嵌套路由（实际上无法做到这一点），您所要做的就是定义父组件（在本例中为 BrowserRouter），然后您可以在整个组件中自由定义路由。您的组件现在定义层次结构。例如，您可以像这样组织 Main 和 App 组件：

const Main = () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

const App = props => (
  <div>
    <Navigation>
      <Link to='/'>Home</Link>
      <Link to='/map'>Map</Link>
      <Link to='/settings'>Settings</Link>
      <Link to='/foo'>Foo</Link>
    </Navigation>

    <Route exact path='/' component={Home}/>
    <Route path='/map' component={Map}/>
    <Route path='/settings' component={Settings}/>
    <Route path='/foo' render={() => (
        <Redirect to="/"/>
    )}/>
  </div>
)

希望这可以帮助。请在下面查看我对您的 jsfiddle 的修复，如果您有任何问题，请告诉我。

https://jsfiddle.net/bagofcole/kL6m8pjk/12/

有关更多信息，请查看：https ://reacttraining.com/react-router/web/guides/quick-start

于 2017-05-06T04:21:30.140 回答