一、前言
在上一篇博客中,只是在最后介绍了一下 react-router-dom 路由的 安装、BrowserRouter 和 HashRouter 的区别. 今天我们将共同学习 React 路由的剩余部分.
Follow me ~
二、Route 配置路径
1. Route 组件
通过该组件来设置应用单个路由信息,Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候,后面 component 将要显示的区域
昨天我们配置了 BrowserRouter 和 HashRouter 组件,从简单方面来说就是 url 路径上带不带 “#” 号的意思. 然后就要开始配置 路由跳转的路径地址了,请看下面代码 :
import React from "react"
import {
Route} from "react-router-dom";
import IndexPage from './view/index';
import AboutPage from './view/about';
import AboutMorePage from './view/aboutMore';
function App() {
return (
<div>
<Route path="/" component={
IndexPage}/>
<Route path="/about" component={
AboutPage}/>
<Route path="/about/more" component={
AboutMorePage}/>
</div>
);
}
export default App;
React 的配置路由跳转就是这么简单,可以分为:
- 在上面引入 Route 和 组件地址
- 上面使用的是 函数式组件,你也可以使用类组件,在 return 里面 使用 Route 单标签,里面写入匹配的路径 和 组件地址
我们来看效果图,这样一个 React 路由就配置好了
2. exact
相信你在浏览器中变更 路径之后,只要是路径中包含有配置的路径时,组件内容都会被显示出来
为了解决这个弊端,我们可以使用 exact
exact 属性表示路由使用 精确匹配模式,非 exact 模式下 ‘/’ 匹配所有以 ‘/’ 开头的路由
path中 匹配url的方式不是相等,而是 以指定的的 url 开头
为了解决这个问题, 你可以在配置路径时,在里面 加上一个单词 exact
代码案例 :
function App() {
return (
<div>
<Route path="/" exact component={
IndexPage}/>
<Route path="/about" exact component={
AboutPage}/>
<Route path="/about/more" exact component={
AboutMorePage}/>
</div>
);
}
浏览器效果 :
三、Link 组件
Link 组件用来处理 a 链接 类似的功能(它会在页面中生成一个 a 标签),但设置这里需要注意的,react-router-dom 拦截了实际 a 标签的默认动作,然后根据所有使用的路由模式(Hash 或者 HTML5)来进行处理,改变了 URL,但不会发生请求,同时根据 Route 中的设置把对应的组件显示在指定的位置
to 属性
to 属性类似 a 标签中的 href
代码实例 :
创建一个自定义组件
import React from "react"
import {
Link} from "react-router-dom"
export default function Nav(){
return (
<nav>
<Link to="/">首页</Link>
<span></span>
<Link to="/about">关于我们</Link>
<span></span>
<Link to="/about/more">详情</Link>
<span></span>
</nav>
)
}
app.js :
function App() {
return (
<div>
<Nav/>
<Route path="/" exact component={
IndexPage}/>
<Route path="/about" exact component={
AboutPage}/>
<Route path="/about/more" exact component={
AboutMorePage}/>
</div>
);
}
link 组件 和 path 属性的区别?
link 组件 只改变 url
path 属性 匹配 url
四、Route 属性
1. render
通过 render 属性来指定渲染函数,render 属性值是一个函数,当路由匹配的时候指定该函数进行渲染
它最终的效果也会向上面那样
代码实例 :
<Route path="/" exact render={
()=>{
return <IndexPage/>
}}/>
2. props
如果 Route 使用的是 component 来指定组件,那么不能使用 props
代码实例 :
父组件 :
// 引入 useState
import React,{
useState} from "react"
function App() {
let [user,setUser] = useState("router吧")
return (
<div>
<Nav/>
<Route path="/" exact render={
()=>