react-router-dom react的路由

1. react路由现在是4.+版本，使用的是react-router-dom，3.+的版本使用的是react-riuter
2. 路由的模式有两种

• 老浏览器提供的 hash模式， 我们称之为： HashRouter
• H5提供的的 hsitory 模式，我们称之为 BrowserRouter
  注意： H5模式的路由需要后端支持

路由的搭建

hash路由 （ HashRouter路由 ）

先安装 react-router-dom npm i react-router-dom -S yarn add react-router-dom

在入口文件中配置router

index.js文件代码

//在入口文件中配置router
import { HashRouter as Router } from 'react-router-dom'   // hash路由ReactDOM.render(<Router>   //使用Router将App包裹起来<App /></Router>,
document.getElementById('root')
);

在App.js中配置路由

    
import React from 'react';
import './App.css';
import { Route,Switch } from 'react-router-dom'//Switch表示使用之后就会完全匹配路由，注意这里是  Route  你是Routerimport Home from './pages/home'//这些文件需要自己创建，路由文件
import List from './pages/list'
import Shop from './pages/shop'
import Login from ' ./pages/Login 'function App() {return (<div className="App"><a href = " #/Home "> Home </a>//hash需要带上 # 号<a href = " #/List "> Home </a><a href = " #/Shop "> Home </a><a href = " #/Shop/login "> Home </a><Switch><Route path = "/" component = { Home } exact></Route>  //重定向，网页打开直接跳转的页面，如果不加exact会有两个内容出现<Route path = "/Home" component = { Home } ></Route>//路径前不要加 点 .   component跳到表示组件<Route path = "/List" component = { List }></Route>  // 是Route，不是Router<Route path = "/Shop" component = { Shop } exact></Route>//二级路由<Route path = "/Shop/login" component = { Shop } render = { ()=>{ return <div> login </div> } }></Route></Switch></div>);
}
export default App;

二级路由

        //函数内可以返回一段结构<Route path = "/Shop/login" component = { Shop } render = { ()=>{ return <div> login </div> } }></Route>//也可以返回一个组件,component后面的组件要相对应改,写法挺多的，怎么写都可以<Route path = "/Shop/login" component = { Shop } render = { ()=>{ return <Login /> } }></Route><Route path = "/Shop/login" component = { Shop } render = { ()=>{ return Login } }></Route><Route path = "/Shop/login" component = { Shop } render = { ()=>{ return { Login } </div> } }></Route>//  还一种写法是在子组件中写二级路由，相对应的二级路由和子组件写在一个文件夹import React,{Component} from 'react';
import { NavLink,Route } from 'react-router-dom'import Login from './Login.js'
import Register from './Register.js'class Shop extends Component{componentWillUpdate () {console.log('luyou gaibian ')}render () {return (<div>Shop<NavLink to = "/shop/login"> 登录 </NavLink><NavLink to = "/shop/register"> 注册 </NavLink><NavLink to = "/shop"> a </NavLink><NavLink to = "/shop"> b </NavLink>//路由显示区域<Route path = "/shop/login" component = { Login }></Route><Route path = "/shop/register" component = { Register }></Route></div>)}
}
export default Shop

H5的history路由 （BrowserRouter 路由 ）

先安装 react-router-dom npm i react-router-dom -S yarn add react-router-dom

在入口文件中配置router

index.js文件代码

//在入口文件中配置router
import { BrowserRouter as Router } from 'react-router-dom'   // h5的history模式ReactDOM.render(<Router>   //使用Router将App包裹起来<App /></Router>,
document.getElementById('root')
);

在App.js中配置

Link和NavLink的区别是，NAvLink可以渲染激活路由，Link只是普通路由

    
import React from 'react';
import './App.css';import { Route,Link,Switch,NavLink} from 'react-router-dom'//Switch表示只渲染一个import Home from './pages/home'
import List from './pages/list'
import Shop from './pages/shop'function App() {return (<div className="App">//使用了NavLink之后，就不能使用 href了，需要改成 to ，h5的路由路径前不需要带上丑陋的小井号<NavLink activeClassName = "active" to = "/Home" > Home </NavLink><NavLink activeClassName = "active" to = "/List"> List </NavLink><NavLink activeClassName = "active" to = "/Shop"> Shop </NavLink><NavLink activeClassName = "active" to = "/shop/login"> login </NavLink>//二级路由<Switch>//只渲染一个<Route path = "/" component = { Home } exact></Route><Route path = "/Home" component = { Home } ></Route><Route path = "/List" component = { List }></Route><Route path = "/Shop" component = { Shop } exact></Route><Route path = "/Shop/login" component = { Shop } render = { ()=>{ return <div> login </div> } }></Route>//错误路由匹配，必须写在<Switch>之中，不然错误路由的内容会一直显示，直接写component，不写path<Route component = { Error }></Route></Switch></div>);
}
export default App;

激活路由

       //使用NavLink ,在App.css中写一个active的类名样式，类名要小心重复，然后使用  activeClassName = " 类名 "<NavLink activeClassName = "active" to = "/Home" > Home </NavLink>