<Link>s rendered outside of a router context cannot navigate

Question

我是用react -router时，跳转页面报错<Link>s rendered outside of a router context cannot navigate 不知道为什么，有人知道原因吗

app.js

import React, { Component } from 'react';
import {Router,Route,hashHistory,Link} from 'react-router';
import Button from 'antd/lib/button';
import './App.css';
import ComponentList from './components/list'
import ComponentBody from './components/body'
import ComponentBodyChild from './components/bodyChild'

class App extends Component {
    render() {
        return (
            <div className="App">
                <ul>
                    <li><Link to={`/`}>main</Link></li>
                    <li><Link to={'./child'}>child</Link></li>
                    <li><Link to={'/list'}>list</Link></li>
                </ul>
                <Router history={hashHistory}>

                    <Route component={ComponentList} path="list">
                    </Route>

                    <Route component={ComponentBody} path="/">
                        <Route component={ComponentBodyChild} path="child"></Route>

                    </Route>

                </Router>
                <Button type="primary">Button</Button>
            </div>
        );
    }
}

export default App;

body.js

import React from 'react'

export default class ComponentBody extends React.Component{
    render(){
        return(
            <div>

                <h1>这里是body</h1>
                <div>{this.props.children}</div>
                {console.log(this.props.children)}
            </div>
        )
    }
}

bodyChild.js

import React from 'react'

export default class ComponentBodyChild extends React.Component{
    render(){
        return(
            <div>
                <h1>这里是BodyChild</h1>
            </div>
        )
    }
}

Answer 1

建议去看一下react-router的github例子或者阮老师的博客http://www.ruanyifeng.com/blo...

先看懂再下手 比盲目下手要更轻松

router的配置应该是在render的最外层文件中 例如入口文件index.js 再通过import把你写好的组件进行导入进来

我放一下之前项目的index.js的例子

import React from 'react'
import { Router, Route, IndexRoute,IndexRedirect, hashHistory } from 'react-router'
import App from '../containers'
import Home from "../containers/home"
import TableContainer from '../containers/tableContainer'
import GeneralRealTime from "../containers/GeneralRealTime"
import GeneralTotal from "../containers/GeneralTotal"
import GeneralNewUser from "../containers/GeneralNewUser"
import GeneralActiveUser from "../containers/GeneralActiveUser"
import GeneralLaunches from "../containers/GeneralLaunches"
import GeneralVersion from "../containers/GeneralVersion"
import RetentionUser from "../containers/RetentionUser"
import NotFound from '../containers/404'


const Routes =  (
            <Router history={hashHistory}>
                <Route path='/' component={App}>
                    <IndexRedirect to="/homepage"/>
                    <Route path="/homepage" component={Home}>
                        <IndexRoute component={TableContainer}/>
                        <Route path="/**/realtimedata" component={GeneralRealTime}/>
                        <Route path="/**/total" component={GeneralTotal}/>
                        <Route path="/**/installation" component={GeneralNewUser}/>
                        <Route path="/**/active_user" component={GeneralActiveUser}/>
                        <Route path="/**/launch" component={GeneralLaunches}/>
                        <Route path="/**/app_version" component={GeneralVersion}/>
                        <Route path="/**/retention" component={RetentionUser}/>
                    </Route>
                    <Route path='*' component={NotFound}/>
                </Route>
            </Router>
        )
ReactDOM.render(Routes,document.getElementById("root"));

<Link>这种标签写在你的某一个组件内部就行了