react基础（6）—— 路由

##########################################################

“遇到喜欢的人，就像浩劫余生，漂流过沧海，终见陆地。”

##########################################################

1，什么是路由？
路由是根据不同的 url 地址展示不同的内容或页面。

2，React Router

版本——4（万物皆组件，以前的版本不都是组件）
一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。

3，安装React router

npm install react-router
npm install react-router-dom（这个包依赖于上面的这个包）

4，准备react组件

import { HashRouter as Router, Route,Redirect, Switch } from "react-router-dom";   

//export {BrowserRouter, Route, Link,.....} 上面的导出的方式，所以是这样的导入

import React from "react";//必须引入react 为了 解析jsx

准备好之后，就可以import相应的路由，然后设置相应跳转了

5，定义路由

HashRouter当点击一个标签的时候会有warning，可以通过BrowserRouter

Route 是进行路由跳转组件

Redirect是重定向组件

Switch是解决无线循环问题的组件

import App from "../App";
import Home from "../components/Home"
import Film from "../components/Film"
import Nowplaying from "../components/Film/Nowplaying"
import Comingsoon from "../components/Film/Comingsoon"
import Card from "../components/Card"
import Detail from "../components/Detail"



const router= (
    <Router>
    
        <App>
            <Switch>
                {/*switch作用- 只渲染匹配路径的第一个孩子*/}
                <Route path="/home" component={Home}/>
                {/*<Route path="/film" component={Film}/>*/}
                <Route path="/film" render={()=>
                        <Film>
                            <Switch>
                            <Route path="/film/nowplaying" component={Nowplaying}/>
                            <Route path="/film/comingsoon" component={Comingsoon}/>
                            <Redirect from="/film" to="/film/nowplaying"/>
                            </Switch>
                        </Film>
                }/>
                <Route path="/card" component={Card}/>

{/*                <Route path="/card" render={()=>
                    false?<Card/>:<Redirect to="/home"/>
                }/>*/}
                {/*<Route path="/card" render={()=>
                    false?<Card/>:<Home/>
                }/>*/}
                <Route path="/detail/:kerwinid" component={Detail}/>

                <Redirect from="*" to="/home"/>
            </Switch>
        </App>
    </Router>
)

export default router;

 

6，Link  && NavLink

功能：点击之后，根据路由规则，然后跳转，（<a/>不需要路由）

-eg：<li><NavLink to="/home" activeClassName="active">home</NavLink></li>

Link和NavLink的区别就是NavLink可以加高亮，Link没有高亮

 

7，路由容器

{
//属性有一个特殊的children
this.props.children
}

然后就可以根据路由，和跳转规则在这个区域里面显示不同的内容了

 

8，路由嵌套

看上面代码实例，可以看到，路由是可以嵌套的（也就是二级路由）

复述：

<Route path="/film" render={()=>
<Film>
<Switch>
<Route path="/film/nowplaying" component={Nowplaying}/>
<Route path="/film/comingsoon" component={Comingsoon}/>
<Redirect from="/film" to="/film/nowplaying"/>
</Switch>
</Film>
}/>

<div>
    film页面
    {this.props.children}
</div>

 

9，动态路由

<Route path="/detail/:xueyou" component={Detail}/>

这个代码就是动态路由（上面代码实例中有）

<li key={item.id} onClick={()=>{
   this.props.history.push(`/detail/${item.id}`)
}} />

通过上面代码触发动态路由

<div>
   detail-{this.props.match.params.xueyou}
</div>

在detail组件中通过上面代码接受到，动态路由传过来的id，然后通过id，发送ajax，请求详情页面的信息，动态创建页面

 

 10，路由拦截

有的时候，我们并不希望用户进入到该页面（比如未登陆的用户），这个时候我们就需要路由拦截功能。

这个实现方法有很多，这里面介绍一个比较不错的方法

在路由里面进行判断设置 —— —— 判断用户到底可以进入哪一个页面：

<Route path="/card" render={()=>
    false?<Card/>:<Redirect to="/home"/>
}/>

 11，react-redux路由——Provider

<Provider></Provider>包裹在根组件外面，让所有组件都能获取到store中的状态，就不需要导入了import store from "../../store";

import { HashRouter as Router, Route,Redirect, Switch } from "react-router-dom";
import React from "react";//必须引入react 为了 解析jsx
// export {BrowserRouter, Route, Link,.....}
import App from "../App";
import Home from "../components/Home"
import Film from "../components/Film"
import Nowplaying from "../components/Film/Nowplaying"
import Comingsoon from "../components/Film/Comingsoon"
import Card from "../components/Card"
import Detail from "../components/Detail"

import {Provider} from "react-redux";
import store from "../store";
const router= (

    <Provider store={store}>
    <Router>
    
        <App>
            <Switch>
                {/*switch作用- 只渲染匹配路径的第一个孩子*/}
                <Route path="/home" component={Home}/>
                {/*<Route path="/film" component={Film}/>*/}
                <Route path="/film" render={()=>
                        <Film>
                            <Switch>
                            <Route path="/film/nowplaying" component={Nowplaying}/>
                            <Route path="/film/comingsoon" component={Comingsoon}/>
                            <Redirect from="/film" to="/film/nowplaying"/>
                            </Switch>
                        </Film>
                }/>
                <Route path="/card" component={Card}/>

{/*                <Route path="/card" render={()=>
                    false?<Card/>:<Redirect to="/home"/>
                }/>*/}
                {/*<Route path="/card" render={()=>
                    false?<Card/>:<Home/>
                }/>*/}
                <Route path="/detail/:kerwinid" component={Detail}/>

                <Redirect from="*" to="/home"/>
            </Switch>
        </App>
    </Router>

    </Provider>
)

export default router;

/*
54     vue,  路由模式 
55         (1) hash  #/home     mode:"hash"
56         (2) history   /home  mode:"history"
57 
58 
59     React , 路由模式
60         (1) hash #/home   <HashRouter>
61         (2) history /home     <BrowserRouter>
62  
63     hash => bom  (window.onhashchange=function(){}) location.hash="#/film"
64     history=>bom (window.onpopstate= function(){})    h5 state  pushState("/film")

*/