react 路由 常用的路由组件

路由组件

React-Router库提供

Router组件

本身不做任何展示，仅提供路由模式配置，另外，该组件会产生一个上下文，上下文提供一些常用的数据和方法，供其他组件使用。

1. HashRouter：使用hash模式配置
2. BrowserRouter：使用BrowserHistory模式匹配

Route组件

根据不同的地址展示不同的组件

属性：

1. path：匹配的路径（默认情况不区分大小写）
   • 设置caseSensitive为true来区分大小写
   • 默认情况下，只匹配初始目录，如果要精确匹配，设置exact为true
   • 如果不设置path，会匹配任何路径
2. element：匹配成功后要显示的组件
3. children：
   • 传递React元素，无论是否匹配，一定会显示children，并且会忽略element属性
   • 传递一个函数，该函数有多个参数，这些参数来自上下文，该函数返回react元素，则一定会显示返回的元素，并且会忽略element属性

Route组件可以写到任何位置，只需要保证是Router组件的后代元素即可。

import React from "react";

import { Route, Routes } from "react-router-dom";

function CompA() {
	return <h1>组件A</h1>;
}
function CompB() {
	return <h1>组件B</h1>;
}
function CompC() {
	return <h1>组件C</h1>;
}
function CompD() {
	return <h1>首页</h1>;
}
function CompE(){
    return <h1>404</h1>
}

export default function TestStaticRouterComp() {
	return (
            <Routes>
				<Route path="/a" caseSensitive element={<CompA/>} ></Route>
				<Route path="/a/b" element={<CompB/>}></Route>
				<Route path="/c" element={<CompC/>}></Route>
				<Route path="/" element={<CompD/>}></Route>
				<Route path="*" element={<CompE/>}></Route>
		</Routes>
	);
}

Switch组件

写到Switch组件中的Route组件，当匹配到第一个Route后，会立即停止匹配。

由于Switch组件会循环所有子元素，然后让每一个子元素去完成匹配，若匹配到，则渲染对应的组件，然后停止循环。因此不能在Switch的子元素中使用除Route外的其他组件