有毒的react-router4.0

react-router的4.X版本的方法引入和网上常见教程有了一些区别，建议最好看官网文档

Link的引入

　　

import { Link } from 'react-router-dom' 

<Link to="/about">About</Link>

Router的引入

　

import { Router } from 'react-router'
import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

 

Route的引入

import { BrowserRouter as Router, Route } from 'react-router-dom

 

class Home extends React.Component{
    render(){
        return(
            <div>
                <div className="ui secondary pointing menu">
                    <Link to="/" >首页</Link>
                    <Link to="/tv" >电视</Link>
                </div>
                {this.props.children}
            </div>
        )
    }
}
class TV extends React.Component{
    render(){
        return(
            <div>
            <span>
                电视节目列表
            </span>
            {this.props.children}
            </div>
        )
    }
}
class Show extends React.Component{
    constructor(props){
        super(props);
        console.log(this.props.prams);
    }
    render(){
        return(
            <div>
                <h1>节目</h1>
                {this.props.children}
            </div>
        );
    }
}

ReactDOM.render((
    <Router history={history}>
    <div>
        <Route path="/" component={Home} />
        <Route path="/tv" component={TV} />
        <Route path="/tv/shows/:id" component={Show} />
    </div>
    </Router>
),document.getElementById('nav')
);

 

react-router4.0的路由配置

1.route不能嵌套，会报错

2.需要一个父标签，路由配置要明确路径