react-router-dom路由switch使⽤详解
简介
使⽤React构建的单页⾯应⽤，要想实现页⾯间的跳转，⾸先想到的就是使⽤路由。在React中，常⽤的有两个包可以实现这个需求，那就是react-router和react-router-dom。
本⽂主要针对react-router-dom进⾏说明。
<Switch>是唯⼀的因为它仅仅只会渲染⼀个路径。相⽐之下（不使⽤<Switch>包裹的情况下），每⼀个被location匹配到的<Route>将都会被渲染。
安装
⾸先进⼊项⽬⽬录，使⽤npm安装react-router-dom：
npm install react-router-dom --save-dev //这⾥可以使⽤cnpm代替npm命令
基本操作
然后我们新建两个页⾯，分别命名为“home”和“detail”。在页⾯中编写如下代码：
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div>
<a>去detail</a>
</div>
)
}
}
home.js
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div>
<a>回到home</a>
</div>
)
}
}
detail.js
然后再新建⼀个路由组件，命名为“Router.js”，并编写如下代码：
import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from '../home';
import Detail from '../detail';
const BasicRoute = () => (
<HashRouter>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/detail" component={Detail}/>
</Switch>
react router6</HashRouter>
);
export default BasicRoute;
如上代码定义了⼀个纯路由组件，将两个页⾯组件Home和Detail使⽤Route组件包裹，外⾯套⽤Switch作路由匹配，当路由组件检测到地址栏与Route的path匹配时，就会⾃动加载响应的页⾯。
然后在⼊⼝⽂件中——我这⾥指定的是index.js——编写如下代码：
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';
<Router/>,
);
这⾥相当于向页⾯返回了⼀个路由组件。我们先运⾏项⽬看⼀下效果，在地址栏输⼊“”：
输⼊“”：
如果不使⽤ switch
两个组件都打印

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。