什么是路由?
安装(router@5版本,最新为V6版本)
npm install react-router-dom@5
|
路由的基本使用
- 下载成功后在项目中引入路由相关的组件
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
|
一级路由和多级路由
- 所谓一级路由就是
url上面是一个层级,而多级路由则是多个层级罢了!
代码展示:
import React from 'react'
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
import About from './testPages/about.js'
import Home from './testPages/home.js'
export default function App() {
return (
<div>
<Router>
<Route path="/user/about" component={About}/>
<Route path="/home" component={Home}/>
</Router>
</div>
)
}
|
结果展示:
路由的重定向(Redirect)以及模糊和精确查询
- 在
React中,路由的重定向又称为万能匹配,里面提供两个参数,如下:
{}
<Redirect from="/" to="/home"/>
|
- 此时的
路由重定向为模糊匹配,是存在问题的, 此时你切换网页上的url地址跳转路由,点击刷新,网页是始终跳转到路由的重定向有页面上,即便你当前的网页上的url是有效存在的, 因为默认的模糊查询是只要匹配到网页url中存在from属性中任意字段机会触发to属性的跳转(上面代码的from是匹配到 / 所有的 url 都是以 / 开头的,因此网页刷新都会触发路由的重定向功能), 因此一般路由的重定向功能会结合Switch来使用,这里的Switch是类似js中的Switch,即只要匹配到对应的路由就跳出Switch分支,这样结合路由的重定向功能就能解决上述的问题了!
<Router>
{}
<Switch>
{}
<Route path="/user/about" component={About}/>
{}
<Route path="/home" component={Home}/>
{}
<Redirect from="/" to="/home" exact/>
</Switch>
</Router>
|
结果展示:
注意:exact 精确匹配 (Redirect 即使使用了exact, 外面还要嵌套Switch 来用)
案例展示:
- 实现路由的跳转,对于匹配不到的
url一路展示404页面
import React from 'react'
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
import About from './testPages/about.js'
import Home from './testPages/home.js'
import NotFound from './testPages/404.js'
export default function App() {
return (
<div>
<Router>
{/* 使用Switch来解决每次页面刷新,重定向功能执行的bug(模糊匹配) */}
<Switch>
{/* 多级路由 */}
<Route path="/user/about" component={About}/>
{/* 一级路由 */}
<Route path="/home" component={Home}/>
{/* 路由的重定向(使用exact实现精确匹配) */}
<Redirect from="/" to="/home" exact/>
{/* 匹配不到的页面则展示404 */}
<Route component={NotFound}/>
</Switch>
</Router>
</div>
)
}
|
结果展示:
嵌套路由
- 嵌套路由原则：理论上是可以无限嵌套，但必须要让使用二级路由的一级路由匹配到，否则不显示,由此可看出,要使用嵌套路由的以及路由是不能使用
精确匹配(exact)的,否则将无法实现正常的二级路由的页面跳转
案例展示:
- 更改页面上的
url数据,跳转到对应的页面上, 一级路由默认重定向到home页面,二级路由(home)的默认重定向到info页面上,也就是多整个页面默认重定向到/home/info页面上
一级路由(路由嵌套)
import React from 'react'
import{HashRouter as Router,Route,Redirect,Switch} from 'react-router-dom'
import About from './testPages/about.js'
import Home from './testPages/home.js'
import NotFound from './testPages/404.js'
export default function App() {
return (
<div>
<Router>
{/* 使用Switch来解决每次页面刷新,重定向功能执行的bug(模糊匹配) */}
<Switch>
{/* 多级路由 */}
<Route path="/user/about" component={About}/>
{/* 一级路由 */}
<Route path="/home" component={Home}/>
{/* 路由的重定向(使用exact实现精确匹配) */}
<Redirect from="/" to="/home" exact/>
{/* 匹配不到的页面则展示404 */}
<Route component={NotFound}/>
</Switch>
</Router>
</div>
)
}
|
二级路由(嵌套路由)home
import React from 'react'
import{HashRouter as Router,Route,Redirect,Switch} from 'react-router-dom'
import About from './about.js'
import Info from './info.js'
import NotFound from './404.js'
export default function Home() {
return (
<div>
首页
{/* 在子组件下设置二级路由调用 */}
<div style={{width:'200px',height:'600px',backgroundColor:'skyblue'}}>
<Router>
{/* 使用Switch来解决每次页面刷新,重定向功能执行的bug(模糊匹配) */}
<Switch>
{/* 多级路由 */}
<Route path="/home/about" component={About}/>
{/* 一级路由 */}
<Route path="/home/info" component={Info}/>
{/* 路由的重定向(使用exact实现精确匹配),一进入home页面默认跳转到info页面 */}
<Redirect from="/home/" to="/home/info" exact/>
{/* 匹配不到的页面则展示404 */}
<Route component={NotFound}/>
</Switch>
</Router>
</div>
</div>
)
}
|
结果展示:
