react-router之路由定义
2023-09-11 14:19:18 时间
简介
我们一般使用Route
组件来定义路由,但是在定义的时候需要使用Routes
组件类进行包裹点击,老版本应该是Switch
组件
定义
export default function App() {
return (
<div className="App">
<h1>Welcome to React Router!</h1>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
{/* 重定向到首页 */}
<Route path="*" element={<Navigate to="/"/>} />
</Routes>
</div>
);
}
动态路由
- 当我们把
path
属性写成如下的时候/name/*
,他会匹配所有的以name
开头的路径,如/name/a
、/name/b
等 - 动态路由通过
:style
的形式实现,博客
嵌套路由
- 嵌套路由的
path
可以不用写父级的路径 - 且不需使用
Outlet
组件作为子组件的占位符
路由定义文件
export default function App() {
return (
<div className="App">
<h1>Welcome to React Router!</h1>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />}>
{/* 定义嵌套路由 */}
<Route path="child" element={<AboutChild/>}></Route>
</Route>
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</div>
);
}
路由文件
function About() {
const navigate = useNavigate();
const handelClickToChild = () => {
navigate("/about/child");
};
return (
<>
<main>
<h2>Who are we?</h2>
<p>That feels like an existential question, don't you think?</p>
</main>
<button onClick={handelClickToChild}>嵌套路由</button>
{/* 定义子路由的显示位置 */}
<Outlet/>
</>
);
}
效果
相关文章
- Pecan控制器和路由系统
- 从负载均衡到路由,微服务应用现场一键到位
- 关于缺省路由传递问题的探讨(下)[ip default-network、ip default-gateway等]
- [React] Override webpack config for create-react-app without ejection
- React 阻止路由离开(路由拦截)
- Flutter入门(三)-底部导航+路由
- 震惊!!!99%的网工都不知道的网络风险——路由聚合引发的潜在路由环路风险
- reactjs路由router的基本使用
- ASP.NET Core 6框架揭秘实例演示[30]:利用路由开发REST API
- 106. 如何提高 SAP UI5 应用路由 url 的可读性
- SAP UI5 应用开发教程之七十 - 如何使用按钮控件触发页面路由跳转试读版
- 如何对SAP Spartacus支持路由的Component进行单元测试
- vuejs项目:路由跳转时更改页面title名称
- 造轮子——前端路由
- 神州路由器IPV6各种路由配置
- Django(14)-应用及分布式路由
- iproute2路由配置(ip rule、ip route、traceroute)
- 网络实验之IS-IS路由协议基础配置
- 【taro react hooks 错误解决】---- Warning: Can‘t perform a React state update on an unmounted component.
- Windows开启路由转发功能