react-router-dom react的路由

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  你是Router

import 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>