社区首页 >专栏 >React-Router-Switch

React-Router-Switch

原创

杨不易呀

发布于 2023-09-30 23:23:38

52200

代码可运行

文章被收录于专栏：杨不易呀杨不易呀

运行总次数：0

代码可运行

前言

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:

import React from 'react';

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

export default Other;

App.js:

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:

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;