react-router 入门一

1，下载react-router-dom 

npm add react-router-dom

create-react-app demo1

2,引入

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

3,设置路由

app.js：

class App extends Component {
  render() {
    return (
     <Router>
       <div>
         <NavBar/>
         <Route exact path='/' component={Home}/>    //Home组件    
                                                    // exact设置，防止出现home组件重复
         <Route path='/content' component={Comtent}/>   //Comtent 组件
       </div>
     </Router>
    );
  }
}

以上代码，在url地址栏里面输入/或者/content，就可以跳转到对应的组件

导航栏NavBar.js：

class NavBar extends Component{
        render(){
                return(
                    <div>
                        <Link to='/'>home</Link>
                        <Link to='/content'>comtent</Link>
                    </div>
                )
        }
}

以上代码，点击导航栏，可以跳转到对应的组件