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

一、Switch1、基本介绍Switch 用于只渲染第一个匹配到的路由匹配到后就停止不再继续往下找2、基本使用1pagesAbout 组件importReact,{Component}fromreact;exportdefaultclassAboutextendsComponent{render(){returnh3About Content/h3;}}Home 组件importReact,{Component}fromreact;exportdefaultclassHomeextendsComponent{render(){returnh3Home Content/h3;}}Test 组件importReact,{Component}fromreact;exportdefaultclassTestextendsComponent{render(){returnh3Test Content/h3;}}2componentsMyNavLink 组件importReact,{Component}fromreact;import{NavLink}fromreact-router-dom;import./index.css;exportdefaultclassMyNavLinkextendsComponent{render(){returnNavLink activeClassNameselectedclassNamelist-group-item{...this.props}/;}}.selected{color:blue;font-weight:bold;background-color:#f0f0f0;}3mainApp 组件importReact,{Component}fromreact;import{Route,Switch}fromreact-router-dom;importHomefrom./pages/Home;importAboutfrom./pages/About;importTestfrom./pages/Test;importMyNavLinkfrom./components/MyNavLink/index;exportdefaultclassAppextendsComponent{render(){return(divh2React Router Demo/h2divMyNavLink to/aboutAbout/MyNavLinkMyNavLink to/homeHome/MyNavLink/divdivSwitchRoute path/aboutcomponent{About}/Route path/homecomponent{Home}/Route path/homecomponent{Test}//Switch/div/div);}}index.jsximportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件import{BrowserRouter}fromreact-router-dom;// 渲染 App 组件到页面ReactDOM.render(BrowserRouterApp//BrowserRouter,document.getElementById(root),);二、路由精准匹配与模糊匹配1、基本介绍Route 默认是模糊匹配Route 的 exact 用于控制路由的匹配规则确保只有当 URL 完全匹配时才渲染组件2、基本使用1pagesAbout 组件importReact,{Component}fromreact;exportdefaultclassAboutextendsComponent{render(){returnh3About Content/h3;}}Home 组件importReact,{Component}fromreact;exportdefaultclassHomeextendsComponent{render(){returnh3Home Content/h3;}}2componentsMyNavLink 组件importReact,{Component}fromreact;import{NavLink}fromreact-router-dom;import./index.css;exportdefaultclassMyNavLinkextendsComponent{render(){returnNavLink activeClassNameselectedclassNamelist-group-item{...this.props}/;}}.selected{color:blue;font-weight:bold;background-color:#f0f0f0;}3mainApp 组件importReact,{Component}fromreact;import{Route}fromreact-router-dom;importHomefrom./pages/Home;importAboutfrom./pages/About;importMyNavLinkfrom./components/MyNavLink/index;exportdefaultclassAppextendsComponent{render(){return(divh2React Router Demo/h2divMyNavLink to/aboutAbout/MyNavLinkMyNavLink to/home/a/bHome/MyNavLink/divdivRoute exact path/aboutcomponent{About}/Route exact path/homecomponent{Home}//div/div);}}index.jsximportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件import{BrowserRouter}fromreact-router-dom;// 渲染 App 组件到页面ReactDOM.render(BrowserRouterApp//BrowserRouter,document.getElementById(root),);三、Redirect1、基本介绍Redirect 用于自动将用户从一个路由导航到另一个路由2、基本使用1pagesAbout 组件importReact,{Component}fromreact;exportdefaultclassAboutextendsComponent{render(){returnh3About Content/h3;}}Home 组件importReact,{Component}fromreact;exportdefaultclassHomeextendsComponent{render(){returnh3Home Content/h3;}}2componentsMyNavLink 组件importReact,{Component}fromreact;import{NavLink}fromreact-router-dom;import./index.css;exportdefaultclassMyNavLinkextendsComponent{render(){returnNavLink activeClassNameselectedclassNamelist-group-item{...this.props}/;}}.selected{color:blue;font-weight:bold;background-color:#f0f0f0;}3mainApp 组件importReact,{Component}fromreact;import{Route,Redirect,Switch}fromreact-router-dom;importHomefrom./pages/Home;importAboutfrom./pages/About;importMyNavLinkfrom./components/MyNavLink/index;exportdefaultclassAppextendsComponent{render(){return(divh2React Router Demo/h2divMyNavLink to/aboutAbout/MyNavLinkMyNavLink to/homeHome/MyNavLink/divdivSwitchRoute path/aboutcomponent{About}/Route path/homecomponent{Home}/Redirect to/about//Switch/div/div);}}index.jsximportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件import{BrowserRouter}fromreact-router-dom;// 渲染 App 组件到页面ReactDOM.render(BrowserRouterApp//BrowserRouter,document.getElementById(root),);4路由规则路由说明/about匹配第一个 Route渲染 About 组件/home匹配第二个 Route渲染 Home 组件/other不存在的路径前两个 Route 都不匹配匹配 Redirect重定向到/about