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

一、Switch

1、基本介绍

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

2、基本使用

（1）pages

1. About 组件

importReact,{Component}from"react";exportdefaultclassAboutextendsComponent{render(){return<h3>About Content</h3>;}}

1. Home 组件

importReact,{Component}from"react";exportdefaultclassHomeextendsComponent{render(){return<h3>Home Content</h3>;}}

1. Test 组件

importReact,{Component}from"react";exportdefaultclassTestextendsComponent{render(){return<h3>Test Content</h3>;}}

（2）components

• MyNavLink 组件

importReact,{Component}from"react";import{NavLink}from"react-router-dom";import"./index.css";exportdefaultclassMyNavLinkextendsComponent{render(){return<NavLink activeClassName="selected"className="list-group-item"{...this.props}/>;}}

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

（3）main

1. App 组件

importReact,{Component}from"react";import{Route,Switch}from"react-router-dom";importHomefrom"./pages/Home";importAboutfrom"./pages/About";importTestfrom"./pages/Test";importMyNavLinkfrom"./components/MyNavLink/index";exportdefaultclassAppextendsComponent{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

importReactfrom"react";// 引入 React 核心库importReactDOMfrom"react-dom";// 引入 ReactDOMimportAppfrom"./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 组件

importReact,{Component}from"react";exportdefaultclassAboutextendsComponent{render(){return<h3>About Content</h3>;}}

1. Home 组件

importReact,{Component}from"react";exportdefaultclassHomeextendsComponent{render(){return<h3>Home Content</h3>;}}

（2）components

• MyNavLink 组件

importReact,{Component}from"react";import{NavLink}from"react-router-dom";import"./index.css";exportdefaultclassMyNavLinkextendsComponent{render(){return<NavLink activeClassName="selected"className="list-group-item"{...this.props}/>;}}

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

（3）main

1. App 组件

importReact,{Component}from"react";import{Route}from"react-router-dom";importHomefrom"./pages/Home";importAboutfrom"./pages/About";importMyNavLinkfrom"./components/MyNavLink/index";exportdefaultclassAppextendsComponent{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

importReactfrom"react";// 引入 React 核心库importReactDOMfrom"react-dom";// 引入 ReactDOMimportAppfrom"./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 组件

importReact,{Component}from"react";exportdefaultclassAboutextendsComponent{render(){return<h3>About Content</h3>;}}

1. Home 组件

importReact,{Component}from"react";exportdefaultclassHomeextendsComponent{render(){return<h3>Home Content</h3>;}}

（2）components

• MyNavLink 组件

importReact,{Component}from"react";import{NavLink}from"react-router-dom";import"./index.css";exportdefaultclassMyNavLinkextendsComponent{render(){return<NavLink activeClassName="selected"className="list-group-item"{...this.props}/>;}}

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

（3）main

1. App 组件

importReact,{Component}from"react";import{Route,Redirect,Switch}from"react-router-dom";importHomefrom"./pages/Home";importAboutfrom"./pages/About";importMyNavLinkfrom"./components/MyNavLink/index";exportdefaultclassAppextendsComponent{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

importReactfrom"react";// 引入 React 核心库importReactDOMfrom"react-dom";// 引入 ReactDOMimportAppfrom"./App";// 引入 App 组件import{BrowserRouter}from"react-router-dom";// 渲染 App 组件到页面ReactDOM.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById("root"),);

（4）路由规则