React 路由第一步

 1.安装

cnpm install react-router-dom --save

2.在根组件引入react-router-dom

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

3.使用

在App.js根组件中return方法

<Router>

   <div>

      <Route exact path='/' component={组件} />

   </div>

</Router>

render() {
    return (
      <Router>
       
        <div> 

          <header className='title'>
          <Link to='/'> 首页</Link>
          <Link to='/test'> 测试</Link>
          <Link to='/Rrouter'> Rrouter</Link>
          <Link to='/Reactrouter'> Reactrouter</Link>
          </header>
              <Route exact path='/' component={Lifecycle} />
              <Route exact path='/test' component={Test} />
              <Route exact path='/Rrouter' component={Rrouter} />
              <Route exact path='/Reactrouter' component={Reactrouter} />
  
          
        </div>
         
        </Router>

    );
  }

效果

 

注意：我本机尝试之前一直提示<Route> 必须放在<Routes>里面，期间尝试用win10版本安装的最新nodejs版本也是提示这个；2021.11.17突然又可以了......