react路由

一，为什么使用路由

使用路由可通过修改地址栏的URL来达到显示不同页面的效果（不依赖于服务端）
在react中使用路由需要下载并引入react-router-dom
$ npm i react-router-dom 使用NavLink来指定跳转的路由,其中的属性to指定路由名称 使用Route来匹配跳转的路由,其中的属性path与NavLink的to相对应，component指定要跳转的组件 `` Route用Switch包起来，这样在匹配到一个后，就不会继续往下匹配 

 <Switch>
                    <Route path='/cinema' component={Cinema}></Route>
</Switch>

 

二，一级路由和多级路由

(1).一级路由 

http://localhost:3000/home

`/home`就是一级路由 

(2).二级路由

http://localhost:3000/home/detail

`/home/detail`就是二级路由 

三，模糊匹配，精确匹配

在Route标签中添加exact属性即可开启精确匹配，否则为模糊匹配

<Route path='/cinema' exact component={Cinema}></Route>

 在使用模糊匹配时，‘/cinemalist’也会匹配到‘cinema’,这样有可能会跳转到不被期望的页面，因此，在某些情况下，需要使用精确匹配，

但精确匹配不能滥用，因为使用精确匹配后，该路由就不能在使用嵌套路由了

四，重定向

使用redirect标签可以实现网页的重定向，这样在刚打开页面时可以指定默认跳转到哪个路由页面

<Redirect exact from='/' to='/cinema'></Redirect>

如果打开的页面时http://localhost:3000，则会自动跳转到http://localhost:3000/cinema

五，网页找不到

用户常常会存在网页输入错误的情况，这时将会得不到想要的页面，网页直接返回404，这里我们可以自己设置一个页面不存在的组件，并在Route列表最后添加一条Route

<Route component={NotFound}></Route>

这样当前面所有路由都没有匹配上时，会匹配到最后一条Route

六、嵌套路由

在路由组件里面再引入路由组件，形成嵌套关系

在App中

<Switch>
                    <Route path='/cinema' component={Cinema}></Route>
                    <Route path='/films' component={Films}></Route>
                    <Route path='/my' render={() => { return isAut() ? <My /> : <Login /> }}></Route>
                    <Route path='/detail' component={Detail}></Route>
                    <Route path='/login' component={Login}></Route>
                    {/* 动态路由 */}
                    {/* <Route path='/detail/:myid' component={Detail}></Route> */}
                    <Redirect exact from='/' to='/cinema'></Redirect>
                    <Route component={NotFound}></Route>

                </Switch>

在Films组件中

                <li><NavLink to='/films/onPlay'>正在热映</NavLink></li>
                <li><NavLink to='/films/coming'>即将上映</NavLink></li>
             <Switch>
                    <Route path='/films/onPlay' component={OnPlay}></Route>
                    <Route path='/films/Coming' component={Coming}></Route>
                    <Redirect from='/films' to='/films/onPlay'></Redirect>
             </Switch>

七，编程式导航，声明式导航

像前面提到的利用<NavLink>编写的导航栏以实现页面跳转称为声明式导航

而通过点击事件等调用函数来实现的页面的跳转称为编程式导航

const handleChange = (id) => {
        console.log(props)
        // 函数式导航
        //动态路由传参
        // props.history.push(`/detail/${id}`)
        props.history.push('/detail?id=wang&name=qwi')
        //query传参
        // props.history.push({ pathname: '/detail', id: id })

    }

 八，动态路由

在路由后面使用：参数的形式可以实现动态路由

这里/detail后面的/:myid只是占位符，具体是什么，需要看后续跳转的时候传递的参数

<Route path='/detail/:myid' component={Detail}></Route>

const handleChange = (id) => {
        console.log(props)
        // 函数式导航
        //动态路由传参
        props.history.push(`/detail/${id}`)
        

    }

九，路由拦截

有一些页面在用户满足某些条件前是不允许访问到的，因此需要做路由拦截，当验证通过后，用户才有访问的权限，例如一些APP中‘我的’页面，要在用户登录后才能访问

 <Route path='/my' render={() => { return isAut() ? <My /> : <Login /> }}></Route>

在Route中除了写 component属性外，也可以用render属性来指定组件，只不过render里面是一个函数，函数需要返回一个组件或可以显示在页面上的元素，而所谓的拦截，就可以利用render里面的函数进行一些验证，验证通过，则可以访问特定的页面，否则跳转到其他的页面

十，路由模式

路由模式分为两种，HashRouter和BrowserRouter