- Objective: 使用`<Route>`进行基本路由
- Breadcrumb:
# 概念阐释
## 语义
`<Route>` 将URL的路径名称与对应组件组对，旨在根据当前URL路径渲染组件。`<Route>`是React Router中极为重要的一个部分。
>[!error]
>要核对浏览器中的路径，有时候有s的没有写就不能导航到正确页面。
## 语法
每个 `<Route>` 组件应包括：
1. `path` 属性指示将导致路由呈现的确切URL 路径。例如`/profile/edit`，path的值就是`path="profile"`,`path="edit"`。
2. 描述要渲染的组件的 `element` 属性。
# 实例
## 使用对象的方式
```js
import {createBrowserRouter,RouterProvider,} from "react-router-dom";
//其他代码
const router = createBrowserRouter([
{
path: "/",
element: <Root />,
loader: rootLoader,
children: [
{
path: "team",
element: <Team />,
loader: teamLoader,
},
],
},
]);
//其他代码
```
## 使用`<Route>`
`.createRoutesFromElements` 方法通过 JSX 配置我们的路由。
```js
import { Route, RouterProvider,createBrowserRouter,createRoutesFromElements} from 'react-router-dom';
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<Root />}>
<Route path="about" element={<About />} />
<Route path="Sign-Up" element={<SignUp />} /> //中间有空格，所以路径返回失败，需要和路径一致"/Sign-Up"
<Route path="Articles" element={<Articles />} />
<Route path="Article" element={<Article />} />
<Route path="Categories" element={<Categories />} />
<Route path="Category" element={<Category />} />
<Route path="Author" element={<Author />} />
<Route path="Profile" element={<Profile />} />
<Route path="EditProfileForm" element={<EditProfileForm />} />
</Route>
)
);
```
# 相关内容
# 参考资料
- [使用Route进行基本路由 - codecademy](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-react-router-60d12e07-e364-45e4-9102-8d919d464f5e/lessons/intermediate-react-router-v6/exercises/2022-audit-basic-routing-with-route)
- 本地文件夹：react_router_v6_lession_starting_code
- [createBrowserRouter - React Router](https://beta.reactrouter.com/en/main/routers/create-browser-router)