React-Route路由

第5章：React路由

一、SPA的理解

单页Web应用（single page web application，SPA）。
整个应用只有一个完整的页面。
点击页面中的链接不会刷新页面，只会做页面的局部更新。
数据都需要通过ajax请求获取, 并在前端异步展现。

二、路由的理解

1.什么是路由?

一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component

2. 路由分类

后端路由：
- 理解： value是function, 用来处理客户端提交的请求。
- 注册路由： router.get(path, function(req, res))
- 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前端路由：
- 浏览器端路由，value是component，用于展示页面内容。
- 注册路由: <Route path="/test" component={Test}>
- 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

三、react-router-dom

1. react-router-dom的理解

react的一个插件库。
专门用来实现一个SPA应用。
基于react的项目基本都会用到此库。

2. 相关API

内置组件
- <BrowserRouter>
- <HashRouter>
- <Route>
- <Redirect>
- <Link>
- <NavLink>
- <Switch>
其它
- history对象
- match对象
- withRouter函数

四、路由的的基本使用

1. 准备

下载react-router-dom:

npm install --save react-router-dom@5

2. 基本使用

导航中的a标签改写成Link标签

< Link to="/路径" >xxx< /Link>
展示区写Route标签进行路径的匹配

< Route path = '/路径' component={组件名称}>
< App>最外侧包裹了一个< BrowserRouter>或者< HashRouter>

代码

<div className="list-group">
    {/*导航区*/}
    <Link className="list-group-item"  to="/about">About</Link>
    <Link className="list-group-item"  to="/home">Home</Link>
</div>

<div className="panel-body">
    {/* 展示区，注册路由，也就是写对应的关系 */}
    <Route path="/about"component={About}/>
    <Route path="/home"component={Home}/>
</div>

//index.js:
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    ,document.getElementById("root"))

注意：那么使用Link代替a标签之后，在页面上会是什么呢，我们发现其实页面上也是把link转化为了a标签

3. 路由组件和一般组件

路由组件和一般组件存在差异

1.写法不同：
- 一般组件：<Demo/>
- 路由组件：<Route path="/demo" component={Demo}/>
2.存放位置不同：
- 一般组件：components
- 路由组件：pages
3.接收到的props不同：
- 一般组件：写组件标签时传递了什么，就能收到什么
- 路由组件：接收到三个固定的属性
  - history:
    - go: ƒ go(n)
    - goBack: ƒ goBack()
    - goForward: ƒ goForward()
    - push: ƒ push(path, state)
    - replace: ƒ replace(path, state)
  - location:
    - pathname: "/about"
    - search: ""
    - state: undefined
  - match:
    - params: {}
    - path: "/about"
    - url: "/about"

4. NavLink 标签

NavLink 标签是和 Link 标签作用相同的，但是它又比 Link 更加强大。

在前面的 demo 展示中，你可能会发现点击的按钮并没有出现高亮的效果，正常情况下我们给标签多添加一个 active 的类就可以实现高亮的效果

当我们选中某个 NavLink 标签时，就会自动的在类上添加一个 active 属性
NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
标签体内容是一个特殊的标签属性children
通过this.props.children可以获取标签体内容

封装MyNavLink 去优化使用路由时的代码冗余的情况，代码

MyNavLink组件

render() {
    // console.log(this.props);
    return (
      <NavLink
        activeClassName="xzq"
        className="list-group-item"
        {...this.props}
      />
    );
}

调用

<MyNavLink to="/about" children="About" />
<MyNavLink to="/home" children="Home" />

五、路由传参

1. Switch 解决相同路径问题

首先我们看一段这样的代码
```
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/about" component={About}></Route>
```
这是两个路由组件，在2，3行中，我们同时使用了相同的路径 /about

我们发现它出现了两个 about 组件的内容，那这是为什么呢？

其实是因为，Route 的机制，当匹配上了第一个 /about 组件后，它还会继续向下匹配，因此会出现两个 About 组件，这时我们可以采用 Switch 组件进行包裹。
```
<Switch>
    <Route path="/home" component={Home}></Route>
    <Route path="/about" component={About}></Route>
    <Route path="/about" component={About}></Route>
</Switch>
```
通常情况下，path和component是一一对应的关系。
Switch可以提高路由匹配效率(单一匹配)。匹配到一个即停止匹配

2. 解决多级路径刷新页面样式丢失的问题

当我们将路径改写成 path="/xzq/about" 这样的形式时，我们会发现当我们强制刷新页面的时候，页面的 CSS 样式消失了。这是因为，我们在引入样式文件时，采取的是相对路径，当我们使用二级路由的时候，会使得请求的路径发生改变，浏览器会向 localhost:3000/xzq 下请求 css 样式资源，这并不是我们想要的，因为我们的样式存放于公共文件下的 CSS 文件夹中。

解决方案：
- 1.public/index.html 中引入样式时不写 ./ 写 / （常用）
- 2.public/index.html 中引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
- 3.使用HashRouter
我们一般采用第一种方式去解决

3. 路由的严格匹配与模糊匹配

默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）

开启严格匹配：

<Route exact={true} path="/about" component={About}/>

严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

默认模糊匹配（左前缀匹配规则）：
- <MyNavLink to="/home/a/b" children="Home" />
- <Route path={"/home"} component={Home} />

4. Redirect的使用

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
可以用来指定默认选中项

具体编码：

<Switch>
  <Route path="/about" component={About} />
  <Route path="/home" component={Home} />
  <Redirect to="/about" />
</Switch>

5. 嵌套路由

注册子路由时要写上父路由的path值
路由的匹配是按照注册路由的顺序进行的

6. 向路由组件传递参数

params参数
- 路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
- 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
- 在Test组件中接收参数：this.props.match.params
search参数
- 路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
- 注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
- 在Test组件中接收参数：this.props.location.search
- 备注：获取到的search是urlencoded编码字符串，需要借助querystring解析， import qs from "qs";
state参数
- 路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
- 注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
- 在Test组件接收参数：this.props.location.state
- 备注：刷新也可以保留住参数

7. 编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退

this.props.history.push()
this.props.history.replace()
this.props.history.goBack()
this.props.history.goForward()
this.props.history.go()

8. BrowserRouter 与 HashRouter 的区别

底层原理不一样：
- BrowserRouter使用的是H5的history API，不兼容IE9及以下版本
- HashRouter使用的是URL的哈希值。
path表现形式不一样
- BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
- HashRouter的路径包含#,例如：localhost:3000/#/demo/test
刷新后对路由state参数的影响
- (1). BrowserRouter没有任何影响，因为state保存在history对象中。
- (2). HashRouter刷新后会导致路由state参数的丢失！！！
备注：HashRouter可以用于解决一些路径错误相关的问题。

9. withRouter的使用

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
withRouter的返回值是一个新组件
使用方式：在一般组件中，使用暴露方式如下即可

export default withRouter(一般组件);

posted @ 2022-12-26 13:16 你就是星光阅读(29) 评论(0) 收藏举报

刷新页面返回顶部

你就是星光

React-Route路由

第5章：React路由

一、SPA的理解

二、路由的理解

1.什么是路由?

2. 路由分类

三、react-router-dom

1. react-router-dom的理解

2. 相关API

四、路由的的基本使用

1. 准备

2. 基本使用

3. 路由组件和一般组件

4. NavLink 标签

五、路由传参

1. Switch 解决相同路径问题

2. 解决多级路径刷新页面样式丢失的问题

3. 路由的严格匹配与模糊匹配

4. Redirect的使用

5. 嵌套路由

6. 向路由组件传递参数

7. 编程式路由导航

8. BrowserRouter 与 HashRouter 的区别

9. withRouter的使用

公告