<Link>s rendered outside of a router context cannot navigate<React-router报错>

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/QTFYING/article/details/79232530

今天这个问题找了好久，终于找到为什么了，我们在百度上搜这个问题基本上只有一个答案点击打开链接

其实不是说人家回答的不对，只是比较含糊，看截图：

其实答案就是这样的，当我们在用react-router的时候，react-router的思想就是让我们<Link/>写成一个单独的组件Navigation.js，然后import进来，通过 this.props.children  传递给各路由。然后呢在根路由中添加组件建立关联性。即

  <Router history={browserHistory}>
         <Route path="/" component={Navigation}>
           <Link to="/one">首页</Link>
           <Route path="/one" component={OneComponent}/>
           <Route path="/two" component={TwoComponent}/>
           <Route path="/three" component={ThreeComponent}/>
         </Route>
       </Router>

  

  切记：一定要在这个根路由中建立关联，否则一直会报刚刚那个神魔的错误

  < Route path = "/" component={Navigation} ></Route>

自然而然的我们就可以想到Navigation.js是什么东西了，

import React, { Component } from 'react';
import { Link } from 'react-router';

export default class AppContainer extends Component {
    render(){
        return (
            <div>
                <div>
                   <Link to="/one">One</Link>
                   <Link to="/two">Two</Link>
                   <Link to="/three">Three</Link>
                </div>

                <div>
                     {this.props.children}
                </div>
            </div>
        )
    }
}

老夫一直尝试着将这个文件和Router写到一块去，但是貌似3.0版本是不行的，但是4.0经过该改版是真心可以这样的... ...