[JavaScript知识库]React 页面路由

目录

一、页面路由

1、什么是页面路由

2、页面路由的两种方式

二、路由的基本使用

1、安装 react-router-dom 模块

2、实现路由模式的组件

3、Route 组件

4、Router 组件

5、Link和NavLink组件

6、Redirect：页面重定向

7、Switch

8、withRouter

9、Router Hooks

10、404视图

一、页面路由

1、什么是页面路由

路由就是一种映射关系，前端路由就是根据不同的url去切换不同的组件，简单理解就是可以从一个页面跳转到另一个页面，前端路由就是通过一套url路径 与 组件的对应关系，后端路由就是根据用户不同的请求去返回不同的内容。

2、页面路由的两种方式

(1)hash模式：在url后带#

? ? ? ? ? 缺点：传递参数的方式是在url后拼接,会有体积的限制

?(2)history模式：
?? ??? ?
?? ??? ? ? A、可以传递复杂的参数??BrowserRoute
?? ??? ? ??
?? ??? ? ? B、可以监听浏览器的前进、后退事件(back、forward、go)
?? ??? ? ??

二、路由的基本使用

1、安装 react-router-dom 模块

npm install react-router-dom	

2、实现路由模式的组件

实现路由模式的组件：(最外层)：决定路由模式

• ?? ? ? ?HashRouter组件：实现hash模式的路由
• ? ? ? ? BrowserRouter组件：实现history模式的路由

  // hash模式
ReactDOM.render(
	 <HashRouter>
      	<Route path="/" component={Home}/>
</HashRouter>
)

// history模式
ReactDOM.render(
	   <BrowserRouter>
      	 <Route path="/" component={Home} />
      </BrowserRouter>
)

【注意】：其实就是路由的hash和history两种模式，并且这两个组件是路由的容器，必须在最外层

3、Route 组件

Route组件：实现路径和显示组件之间的映射

?<Route path="/users" component={组件} render={返回dom} location="route对象" exact="匹配规则"/>

? ? ? ? 若用render渲染dom，就不需要component
?? ??? ?
?? ??? ?exact的默认值为false，若设置为true则表示精确匹配

4、Router 组件

? 低级路由，适用于任何路由组件，主要和redux深度集成，使用必须配合history对象,使用Router路由的目的是和状态管理库如redux中的history同步对接

<Router history={history}>
??? ...
</Router>

5、Link和NavLink组件

类似于<a>标签
?? ?

• ?? ? ? ?Link组件的api属性：

?? ??? ? ? ?<Link to="" />
?? ??? ??? ?to属性表示目标页面的路径

• ?? ? ?NavLink组件的api属性：包含了Link组件的所有api,在Link组件的基础上进行了扩展

?(1)Link的api

1. to： 有两种写法，表示跳转到哪个路由

• 字符串写法

??

??? <Link to="/a"?? />

• 对象写法

? <Link to={{

? pathname: '/courses',

? search: '?sort=name',

? hash: '#the-hash',

? state: { fromDashboard: true }

}}/>

1. replace：就是将push改成replace
2. innerRef：访问Link标签的dom

(2)NavLink的api

1. Link的所有api
2. activeClassName 路由激活的时候设置的类名
3. activeStyle 路由激活设置的样式
4. exact? 参考Route，符合这个条件才会激活active类
5. strict? 参考Route，符合这个条件才会激活active类
6. isActive 接收一个回调函数，active状态变化的时候回触发，返回false则中断跳转

const oddEvent = (match, location) => {
? console.log(match,location)

? if (!match) {
??? return false

? }
? console.log(match.id)
? return true
}

<NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>

1. location 接收一个location对象，当url满足这个对象的条件才会跳转

<NavLink to="/a/123" location={{ key:"mb5wu3", pathname:"/a/123" }}/>

6、Redirect：页面重定向

// 基本的重定向

<Redirect to="/somewhere/else" />

// 对象形式

<Redirect
? to={{
??? pathname: "/login",
??? search: "?utm=your+face",
??? state: { referrer: currentLocation }
? }}
/>

// 采用push生成新的记录

<Redirect push to="/somewhere/else" />

// 配合Switch组件使用，form表示重定向之前的路径，如果匹配则重定向，不匹配则不重定向

<Switch>
? <Redirect from='/old-path' to='/new-path'/>
? <Route path='/new-path' component={Place}/>
</Switch>

7、Switch

路由切换，只会匹配第一个路由，可以想象成tab栏
Switch内部只能包含Route、Redirect、Router

??<Switch>
??<Route exact path="/" component={Home}/>
? <Route path="/about" component={About}/>
? <Route path="/:user" component={User}/>
? <Route component={NoMatch}/>
  </Switch>

8、withRouter

当一个非路由组件也想访问到当前路由的match,location,history对象，那么withRouter将是一个非常好的选择，可以理解为将一个组件包裹成路由组件

import { withRouter } from 'react-router-dom'
const MyComponent = (props) => {
??? const { match, location, history } = this.props
???? return (
??????? <div>{props.location.pathname}</div>
??? )
}
const FirstTest = withRouter(MyComponent);

9、Router Hooks

????? 在Router5.x中新增加了Router Hooks用于在函数组件中获取路由信息。使用规则和React的其他Hooks一致。

（1）useHistory：返回history对象

（2）useLocation：返回location对象

（3）useRouteMatch：返回match对象

（4）useParams：返回match对象中的params，也就是path传递的参数??

 import React from ‘react’;
??? import { useHistory } from ‘react-router-dom’;
?function backBtn(props) {
???? ???let? history = useHistory;
???? ???return <button onClick={ ()=> {
???????? ?????history.goBack();
}>返回上一页</button>
????? ?}

10、404视图

既然路由就需要考虑一个问题---404视图。当用户访问一些不存在的URL时就该返回404视图了，但不存在的地址该如何匹配呢？----使用Switch

Switch组件的作用类似于JS中的switch语句，当一项匹配成功之后，就不再匹配后续内容。这样的话就可以把要匹配的内容写在Switch组件中，最后一项写404视图，当其他都匹配不成功时就是404视图。例如：

<Switch>

? <Route exact={true} path={"/"} component={Home}/>

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

? <Route path={"/topics"} component={Topics}/>

? <Route component={View404}/>

</Switch>

?