- Objective:
- Breadcrumb:
# 概念阐释
## 语义
静态路由仅能解决少数静态页面的问题，但如果一个网站中有几十上百篇文章，且时有更新，我们不可能给每个页面加一个[[React Router 使用Route]]，动态路由就是解决这个问题的方法。动态路由使用URL参数`:变量名称`
## 语法
```js
path：“/路径名称/:变量名称”
element:<要导航的页面/>
```
- 变量名称根据语义命名，如name, title,slug
- 路径名称需要与浏览器路径核对，确保无误
# 实例
```js
//App.js
{
path: "/Articles/:title",
element: <Article />, //添加了动态路由，article是展示内容的组件，例如点击列表中的objects，会展示objects的内容
},
{
path: "/Authors/:name",
element: <Author />, //参数name自己组件中的变量名称，根据人类能理解的内容来命名，例如name，title，slug等
},
```
# 相关内容
## 使用参数`useParams`
`useParams`是一个钩子，让动态路由URL所指的子级组件能够正确显示。
```js
import { useParams } from 'react-router-dom';
function User() {
const { userId } = useParams();
// 使用 userId 来获取用户信息或执行其他操作
return <div>User ID: {userId}</div>;
}
```
# 参考资料
- [Dynamic Routes](https://www.codecademy.com/content-items/2ace4407d49746c1a8b3973f1e1eef75/exercises/2022-audit-dynamic-routes?)
- 本地文件夹：react_router_v6_lession_starting_code
- App.js
- Author.js、Category.js、Article.js
- [动态路由- React Router](https://beta.reactrouter.com/en/main/route/route#children)
- [useParams](https://beta.reactrouter.com/en/main/hooks/use-params)