React - Switch、路由精准匹配与模糊匹配、Redirect

一、Switch

1、基本介绍

• Switch 用于只渲染第一个匹配到的路由，匹配到后就停止，不再继续往下找

2、基本使用

（1）pages

1. About 组件

import React, { Component } from "react";

export default class About extends Component {
    render() {
        return <h3>About Content</h3>;
    }
}

1. Home 组件

import React, { Component } from "react";

export default class Home extends Component {
    render() {
        return <h3>Home Content</h3>;
    }
}

1. Test 组件

import React, { Component } from "react";

export default class Test extends Component {
    render() {
        return <h3>Test Content</h3>;
    }
}

（2）components

• MyNavLink 组件

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import "./index.css";

export default class MyNavLink extends Component {
    render() {
        return <NavLink activeClassName="selected" className="list-group-item" {...this.props} />;
    }
}

.selected {
    color: blue;
    font-weight: bold;
    background-color: #f0f0f0;
}

（3）main

1. App 组件

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Test from "./pages/Test";
import MyNavLink from "./components/MyNavLink/index";

export default class App extends Component {
    render() {
        return (
            <div>
                <h2>React Router Demo</h2>
                <div>
                    <MyNavLink to="/about">About</MyNavLink>
                    <MyNavLink to="/home">Home</MyNavLink>
                </div>
                <div>
                    <Switch>
                        <Route path="/about" component={About} />
                        <Route path="/home" component={Home} />
                        <Route path="/home" component={Test} />
                    </Switch>
                </div>
            </div>
        );
    }
}

1. index.jsx

import React from "react"; // 引入 React 核心库
import ReactDOM from "react-dom"; // 引入 ReactDOM
import App from "./App"; // 引入 App 组件
import { BrowserRouter } from "react-router-dom";

// 渲染 App 组件到页面
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root"),
);

---

二、路由精准匹配与模糊匹配

1、基本介绍

1. Route 默认是模糊匹配
2. Route 的 exact 用于控制路由的匹配规则，确保只有当 URL 完全匹配时才渲染组件

2、基本使用

（1）pages

1. About 组件

import React, { Component } from "react";

export default class About extends Component {
    render() {
        return <h3>About Content</h3>;
    }
}

1. Home 组件

import React, { Component } from "react";

export default class Home extends Component {
    render() {
        return <h3>Home Content</h3>;
    }
}

（2）components

• MyNavLink 组件

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import "./index.css";

export default class MyNavLink extends Component {
    render() {
        return <NavLink activeClassName="selected" className="list-group-item" {...this.props} />;
    }
}

.selected {
    color: blue;
    font-weight: bold;
    background-color: #f0f0f0;
}

（3）main

1. App 组件

import React, { Component } from "react";
import { Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import MyNavLink from "./components/MyNavLink/index";

export default class App extends Component {
    render() {
        return (
            <div>
                <h2>React Router Demo</h2>
                <div>
                    <MyNavLink to="/about">About</MyNavLink>
                    <MyNavLink to="/home/a/b">Home</MyNavLink>
                </div>
                <div>
                    <Route exact path="/about" component={About} />
                    <Route exact path="/home" component={Home} />
                </div>
            </div>
        );
    }
}

1. index.jsx

import React from "react"; // 引入 React 核心库
import ReactDOM from "react-dom"; // 引入 ReactDOM
import App from "./App"; // 引入 App 组件
import { BrowserRouter } from "react-router-dom";

// 渲染 App 组件到页面
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root"),
);

---

三、Redirect

1、基本介绍

• Redirect 用于自动将用户从一个路由导航到另一个路由

2、基本使用

（1）pages

1. About 组件

import React, { Component } from "react";

export default class About extends Component {
    render() {
        return <h3>About Content</h3>;
    }
}

1. Home 组件

import React, { Component } from "react";

export default class Home extends Component {
    render() {
        return <h3>Home Content</h3>;
    }
}

（2）components

• MyNavLink 组件

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import "./index.css";

export default class MyNavLink extends Component {
    render() {
        return <NavLink activeClassName="selected" className="list-group-item" {...this.props} />;
    }
}

.selected {
    color: blue;
    font-weight: bold;
    background-color: #f0f0f0;
}

（3）main

1. App 组件

import React, { Component } from "react";
import { Route, Redirect, Switch } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import MyNavLink from "./components/MyNavLink/index";

export default class App extends Component {
    render() {
        return (
            <div>
                <h2>React Router Demo</h2>
                <div>
                    <MyNavLink to="/about">About</MyNavLink>
                    <MyNavLink to="/home">Home</MyNavLink>
                </div>
                <div>
                    <Switch>
                        <Route path="/about" component={About} />
                        <Route path="/home" component={Home} />
                        <Redirect to="/about" />
                    </Switch>
                </div>
            </div>
        );
    }
}

1. index.jsx

import React from "react"; // 引入 React 核心库
import ReactDOM from "react-dom"; // 引入 ReactDOM
import App from "./App"; // 引入 App 组件
import { BrowserRouter } from "react-router-dom";

// 渲染 App 组件到页面
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root"),
);

（4）路由规则

路由	说明
/about	匹配第一个 Route，渲染 About 组件
/home	匹配第二个 Route，渲染 Home 组件
/other（不存在的路径）	前两个 Route 都不匹配，匹配 Redirect，重定向到 /about