ReactRouter5——嵌套路由

文章目录

• 1，嵌套路由
• 2，默认路由

1，嵌套路由

思想：都是绝对路径。

1，多准备几个子组件：

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

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

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

2，父路由不动。

<HashRouter>
	<NavLink to="/aaa">aaa</NavLink>
	<NavLink to="/bbb">bbb</NavLink>
	<Switch>
		<Route path="/aaa" component={Hello1}/>
		<Route path="/bbb" component={Hello2}/>
	</Switch>
</HashRouter>

3，子路由。

export default function (props) {
	return <div>
		<h1>AAA</h1>
		<NavLink to="/aaa/1">aaa</NavLink>
		<NavLink to="/aaa/2">bbb</NavLink>
		<Switch>
			<Route path="/aaa/1" component={Hello3}/>
			<Route path="/aaa/2" component={Hello4}/>
		</Switch>
	</div>
}

效果：

2，默认路由

Redirect组件，可以放在Switch中，作为默认路由。

<HashRouter>
	<NavLink to="/aaa">aaa</NavLink>
	<NavLink to="/bbb">bbb</NavLink>
	<Switch>
		<Route path="/aaa" component={Hello1}/>
		<Route path="/bbb" component={Hello2}/>
		<Redirect to="/aaa/1"/>
	</Switch>
</HashRouter>

效果：

去掉默认路由，效果：