用法
<HashRouter>
<Link to='/'>home</Link>
<Link to='/about'>about</Link>
<Link to='/mine'>mine</Link>
<div>
<Switch>
<Route component={Home} path='/' exact></Route>
<Route component={About} path='/about'></Route>
<Route component={Mine} path='/mine'></Route>
</Switch>
</div>
</HashRouter>
作用
它的作用是 一旦匹配到某个路径, 就立即停止在向下匹配,并渲染该路径对应的组件,和js中的switch...case 的逻辑差不多,
实现
import { Component } from 'react';
import Context from './Context';
import { isMatch } from './utils';
// 一旦匹配成功,就不再向后匹配了
class Switch extends Component {
static contextType = Context;
render() {
let { children } = this.props;
// 由于children 的值只有一个时,就是对象, 1个以上才是数组,所以先都转化成数组
children = Array.isArray(children) ? children : [children];
for (let i = 0; i < children.length; i++) {
if (isMatch(this.context, children[i].props)) {
return children[i];
}
}
return null;
}
}
export default Switch;
Redirect 组件
- 该组件就是,重定向路径(路径不匹配, 或者只有访问的是某个路径时,才进行跳转,也就是 from 和 to 混用)
- from 只有当路径是这个的时候,才会进行to 的重定向
核心逻辑就是直接跳转
import { Component } from 'react';
import Context from './Context';
class Redirect extends Component {
static contextType = Context;
componentDidMount() {
const { from, to } = this.props;
const { pathname } = this.context.location;
// 没有传入from 或者 传入的from 和上下文的 pathname 一样才进行跳转
if (!from || from === pathname) {
this.context.history.push(to);
}
}
render() {
return null;
}
}
export default Redirect;
重向定想看到效果,就自己在地址栏输入一个没有的路径进行查看
效果演示