React-Router-Switch

前言

React Router Switch 是 React Router 库的一部分，它是一个用于渲染与当前 URL 匹配的第一个 <Route> 或 <Redirect> 的包裹组件。它通常用于路由配置中，以确保只渲染与当前 URL 匹配的第一个路由。

React Router 是 React 应用程序中用于管理页面导航和路由的库，它允许你在不刷新整个页面的情况下，根据 URL 的变化渲染不同的组件。Switch 组件是 React Router 中的一个关键组件，因为它帮助你避免多个路由同时匹配的问题。

使用 Switch，你可以按顺序放置多个 <Route> 或 <Redirect> 组件，并且它将只匹配第一个与当前 URL 匹配的路由，忽略后续的路由。这有助于确保只有一个组件与 URL 匹配，避免渲染多个匹配的组件，从而保持路由的一致性和可预测性。

总之，React Router Switch 是 React Router 中的一个重要工具，用于确保在导航时只渲染一个特定的路由组件，以确保良好的用户体验和路由逻辑。它是构建单页面应用程序（SPA）的必备组件之一。

Switch

• 默认情况下路由会从上至下匹配所有的 Route, 只要匹配都会显示
• 如果 Route 没有指定 path, 那么表示这个 Route 和所有的资源地址都匹配

新建 Other.js:

代码语言：javascript复制

import React from 'react';

class Other extends React.PureComponent {
    render() {
        return (
            <div>Other</div>
        )
    }
}

export default Other;

App.js:

代码语言：javascript复制

import React from 'react';
import Home from './components/Home'
import About from './components/About'
import Other from './components/Other'
import {BrowserRouter, HashRouter, Link, NavLink, Route, Routes} from 'react-router-dom';

class App extends React.PureComponent {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <Link to={'/home'}>Home</Link>
                    <Link to={'/home/about'}>About</Link>

                    <Route path="/home" component={Home}/>
                    <Route path="/home/about" component={About}/>
                    <Route component={Other}/>
                </BrowserRouter>
            </div>
        )
    }
}

export default App;

在页面的体现就是不管你点击的是 Home 还是 About 都会显示 Other 组件出来，如果想要匹配到了之后就不在往后匹配了就需要使用如下的方案进行解决即可。

• 但是在企业开发中大部分情况下, 我们希望的是一旦有一个匹配到了后续就不要再匹配了
• 此时我们就可以通过 Switch 来实现

更改 App.js:

代码语言：javascript复制

import React from 'react';
import Home from './components/Home'
import About from './components/About'
import Other from './components/Other'
import {BrowserRouter, HashRouter, Link, NavLink, Route, Routes, Switch} from 'react-router-dom';

class App extends React.PureComponent {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <Link to={'/home'}>Home</Link>
                    <Link to={'/about'}>About</Link>

                    <Switch>
                        <Route exact path="/home" component={Home}/>
                        <Route exact path="/about" component={About}/>
                        <Route exact component={Other}/>
                    </Switch>
                </BrowserRouter>
            </div>
        )
    }
}

export default App;

输入图片说明

最后

本期结束咱们下次再见