react基础4路由

react基础4路由

首先需要安装引入路由

https://reacttraining.com/react-router/web/guides/quick-start

cnpm install --save react-router-dom

路由导入方法

// just component , 把所有路由模块，重定向都做成了组件
// react-router-dom 4, 5 版本写法一致
import React from 'react' 

import Home from "../views/home/Home"
import Login from "../views/login/Login"
import User from '../views/usermanage/User'


import {
    HashRouter as Router, //路由需要包裹的组件  as就是相当于给他起了个别名叫Router
    Route, //每个路由组件都需要此组件

} from "react-router-dom"





const BlogRouter = ()=>(
    <Router>
        <Route path="/home" component={Home} />
        <Route path="/login" component={Login}/>
        <Route path="/user-manage/users" component={User}/>

    </Router>
)

export default BlogRouter

如果是那个history模式的话我们可以（哈希模式和history模式）

哈希模式在url路径上有# history没有#

history模式的话一般在真正开发的时候需要注意，如果你设置了history的话需要你的后端重新渲染下页面不然会报404错误

BrowsRouter as Router

import {
    BrowsRouter as Router, //路由需要包裹的组件  as就是相当于给他起了个别名叫Router
    Route, //每个路由组件都需要此组件

} from "react-router-dom"

二级路由的两种写法

第一种直接在父组件中引入

import React, { Component } from 'react'
import Role from '../../views/rightmanage/Role'
import Right from '../../views/rightmanage/right'
import {Route} from 'react-router-dom'   //注意引入Route

export default class Manage extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>权限列表</li>
                    <li>角色列表</li>
                </ul>
                <Route path="/right-manage/role" component={Role}/>
                <Route path="/right-manage/right" component={Right}/>
                {/* {this.props.children} */}
            </div>
        )
    }
}

第二种利用槽口的形式

  <Route path="/right-manage" render= {()=>
            <Manage>
                <Route path="/right-manage/role" component={Role}/>
                <Route path="/right-manage/right" component={Right}/>
            </Manage>
        }/>

路由重定向

需要引入Redirect

import {
    HashRouter as Router, //路由需要包裹的组件  as就是相当于给他起了个别名叫Router
    Route, //每个路由组件都需要此组件
    Redirect, //路由重定向 

} from "react-router-dom"

<Redirect from="/" to="/home"/>

这里需要注意react组件是弱关系匹配模糊查询假如你已经在如下路径了但是一刷新又回到home下了
因为没有就相当于switch没有break一样 只要一匹配到带有/的又回到了home

http://localhost:3000/#/user-manage/users

那么这里我们有一个Switch组件在Route的外层套一下这样就会这要匹配符合的组件就停止了

import {
    HashRouter as Router, //路由需要包裹的组件  as就是相当于给他起了个别名叫Router
    Route, //每个路由组件都需要此组件
    Redirect, //路由重定向
    Switch  //匹配到第一个符合条件的组件就停止了 
} from "react-router-dom"


const BlogRouter = ()=>(
    <Router>
        <Switch>
            <Route path="/home" component={Home} />
            <Route path="/login" component={Login}/>
            <Route path="/user-manage/users" component={User}/>
            <Route path="/user-manage/users" component={User}/>
            {/* <Route path="/right-manage" component={Manage}/> */}
            <Route path="/right-manage" render= {()=>
                <Manage>
                    <Route path="/right-manage/role" component={Role}/>
                    <Route path="/right-manage/right" component={Right}/>
                </Manage>
            }/>
            <Redirect from="/" to="/home"/>
        </Switch>
    </Router>
)

二级路由的话一样继续Redirec

            <Route path="/right-manage" render= {()=>
                <Manage>
                    <Switch>
                        <Route path="/right-manage/role" component={Role}/>
                        <Route path="/right-manage/right" component={Right}/>
                        <Redirect from="/right-manage" to="/right-manage/role"/>
                    </Switch>
                </Manage>
            }/>

在重定向上加上exact

这样的话就只能输入 / 才能匹配到 这样的严格模式

如果匹配不到的话我们可以加这个让他报404

 <Route path="*" component={Notfond}/>
 ```


### 路由出口也就是组件外面不能写导航必须写在路由内部

```
import React, { Component } from 'react';
import './App.css';
import BlogRouter from './router'
// import { NavLink } from 'react-router-dom'
class App extends Component{
  render(){
    return <div>
      {/* <div>侧边栏</div> */}
      {/* <NavLink to="/home">home</NavLink> */}
      <BlogRouter/>
    </div>
  }
}

export default App;

假如想这样外面写东西的话需要在重新引入一个组件改成这样的写法

const BlogRouter = ()=>(
    <Router>
        <Switch>
            <Route path="/login" component={Login}/>
            <Route path="/" component={DashBoard}/>
        </Switch>
    </Router>
)

react 路由导航

需要引入Navlink

import {
    Route, //每个路由组件都需要此组件
    Redirect, //路由重定向
    Switch,  //匹配到第一个符合条件的组件就停止了
    NavLink  //路由导航
} from "react-router-dom"

<NavLink to="/home" activeClassName="active">主页</NavLink>

编程式导航

    handclick = (id)=>{
        // console.log(this.props) // 外部父组件 Route提供的,history 跳转页面的方法
        //编程式导航
        this.props.history.push(`/article-manage/preview/${id}`)
    }

react路由守卫（路由拦截）？

在react中其实没有所谓的路由守卫我们用的路由拦截其实就是个三目运算

const BlogRouter = ()=>(
    <Router>
        <Switch>
            <Route path="/login" component={Login}/>
            {
                localStorage.getItem("islogin")==="true"?
                <Route path="/" component={DashBoard}/>:
                <Redirect to="/login"/>
            }
        </Switch>
    </Router>
)

路由传参

首先和Vue一样需要设置传id的占位符

<Route path="/article-manage/preview/:myid" component={Preview}/>

然后再跳转的时候

    handleClick = (id)=>{
        // console.log(this.props) // 外部父组件 Route提供的,history 跳转页面的方法
        //编程式导航
        this.props.history.push(`/article-manage/preview/${id}`)
    }

获取

    componentDidMount() {
        console.log("获取id,再ajax请求",this.props.match.params.myid)
    }

withRouter 干爹组件

这里我们在下我们可以直接访问到this.props

如果不在包裹下假如是它的孙子，又要访问this.props怎么办，这个时候我们可以自己通过父子组件传值把this.props属性传过来

或者用withRouter

import {withRouter} from 'react-router'