ReactRouter6——入门案例

文章目录

• 1，入门案例
• 2，默认路由
• 3，NavLink

1，入门案例

npm安装。

npm i react-router-dom@6

准备两个子组件。

export default function (props) {
	return <h1>AAA</h1>
}

export default function (props) {
	return <h1>BBB</h1>
}

App.jsx：

import Hello1 from "./components/Hello1";
import Hello2 from "./components/Hello2";
import {HashRouter, Link, Route, Routes} from "react-router-dom";
function App(props) {
	return (
		<HashRouter>
			<Link to="/hello1">Hello</Link>
			<Link to="/hello2">Hello2</Link>
			<Routes>
				<Route path="/hello1" element={<Hello1/>}/>
				<Route path="/hello2" element={<Hello2/>}/>
			</Routes>
		</HashRouter>
	)
}
export default App;

效果：

2，默认路由

Navigate组件：出现即跳转。

其他地方也能用。

<HashRouter>
	<Link to="/hello1">Hello</Link>
	<Link to="/hello2">Hello2</Link>
	<Routes>
		<Route path="/hello1" element={<Hello1/>}/>
		<Route path="/hello2" element={<Hello2/>}/>
		<Route path="/" element={<Navigate to="/hello1"/>}/>
	</Routes>
</HashRouter>

效果：

去掉默认路由，效果：

3，NavLink

可以给激活的链接添加类名。

<NavLink to="/hello1" className={b => {
	return b.isActive ? "abc normal" : "normal";
}}>Hello</NavLink>
<NavLink to="/hello2" className={b => {
	return b.isActive ? "abc normal" : "normal";
}}>Hello2</NavLink>

效果：