"react-router-dom": "5.3.0"
ComponentChuan-index.js
render = () => (
<div>
<h1>组件传值</h1>
<span><Link to="/ComponentChuan/FatherToSon">props传数据</Link></span> |
<span><Link to="/ComponentChuan/SonToFather">props传方法</Link></span> |
<span><Link to="/ComponentChuan/FatherToSon_ref">ref</Link></span> |
<span><Link to="/ComponentChuan/PubSubDemo">非父子</Link></span> |
<hr/>
<div>
<Route path="/ComponentChuan/FatherToSon" component={FatherToSon} ></Route>
<Route path="/ComponentChuan/SonToFather" component={SonToFather} ></Route>
<Route path="/ComponentChuan/FatherToSon_ref" component={FatherToSon_ref} ></Route>
<Route path="/ComponentChuan/PubSubDemo" component={PubSubDemo} ></Route>
</div>
</div>
)
"react-router-dom": "^6.2.1",
一级路由页面:
<Route path="/ComponentChuan" element={<ComponentChuan />}>
<Route path="/ComponentChuan/FatherToSon_ref" element={<FatherToSon_ref />}></Route>
<Route path="/ComponentChuan/PubSubDemo" element={<PubSubDemo />}></Route>
<Route path="/ComponentChuan/FatherToSon" element={<FatherToSon />}></Route>
<Route path="/ComponentChuan/SonToFather" element={<SonToFather />}></Route>
</Route>
嵌套路由页面:
render() {
return (
<div>
<h1>ComponentChuan</h1>
<span> <Link to="/ComponentChuan/FatherToSon"> 父----》子(propS)</Link></span> |
<span><Link to="/ComponentChuan/SonToFather">父----》子props传方法</Link></span> |
<span><Link to="/ComponentChuan/FatherToSon_ref">ref</Link></span> |
<span><Link to="/ComponentChuan/PubSubDemo">非父子</Link></span> |
<hr />
<div className='context'>
{/* 嵌套路由的显示 */}
<Outlet></Outlet>
</div>
</div>
)
}