React-Router

react-router 是官方指定和维护的 React 路由库，它通过管理 URL，实现组件间切换，和状态 (state) 的变化。

装包

  1. npm i react-router-dom --save

使用

使用时，路由Router就是React的一个组件。需要引用

  1. import {
  2.     BrowserRouter as Router,
  3.     //as就是把前面的作为后面的使用
  4.     Route,
  5.     Link
  6. } from 'react-router-dom'

Router组件本身只是一个容器，真正的路由要通过Route组件定义。

创建一个router组件

  1. import React from 'react'
  2. import {BrowserRouter,Route,Link} from 'react-router-dom'
  4. let Home = () => <h2>Home</h2>
  5. let User = () => <h2>User</h2>
  6. //几个简单的子组件
  8. class App extends React.Component{
  9.     render(){
  10.         return(
  11.             <BrowserRouter>
  12.                 <div className='app'>
  13.                     <div className='header'>
  14.                         <h1>App</h1>
  15.                     </div>
  16.                     <div className='main'>
  17.                         <Route exact path='/home' component={Home}></Route>
  18.                         <Route path='/user' component={User}></Route>
  19.                         //path属性指定路由的匹配规则（地址）
  20.                         //component属性指定加载的组件
  21.                     </div>
  22.                     <div className='footer'>
  23.                         <Link to='/home'>Home</Link>
  24.                         //to跳转到对应路径的组件
  25.                         <Link to='/user'>User</Link>
  26.                     </div>
  27.                 </div>
  28.             </BrowserRouter>
  29.         )
  30.     }
  31. }
  32. export default App

参考