7-ReactRouter

## 一：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/27a35cdb-7466-4662-b66a-98309a33ec2b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/408fb86a-64e2-4c3d-a67f-29a3c388c92f.png)
```java
npx create-react-app react-router-pro
npm i react-router-dom
npm run start
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/20430380-cd85-487f-84c2-0945f1f7b638.png)
index.js
```java
import {createBrowserRouter,RouterProvider} from "react-router-dom"
// 1.创建router实例对象并且配置路由对应关系
const router = createBrowserRouter([
 {
  path:"/login",
  element:<div>我是登录页</div>
 },
 {
  path:"/article",
  element:<div>我是文章页</div>
 }
])

const root = ReactDom.createRoot(document.getElementById("root"))
root.render(
 <React.StrictMode>
 // 2.路由绑定
 <RouterProvider router = {router}></RouterProvider>
 </React.StrictMode>
)
```
## 二：抽象路由模块
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/1f87b5fc-9091-4f24-9b21-9016afdf35e2.png)
1.src-page-Login Article 文件夹 --分别index.js
Article-index.js
```java
const Article = ()=>{
  return <div>我是文章页</div>

  export default Article
}
```
Login-index.js
```java
const Login = ()=>{
  return <div>我是登录页</div>

  export default Login
}
```
2.src-router-index.js
```java
import Login from "../page/Login"
import Article from "../page/Article"
import {createBrowserRouter} from "react-router-dom"
createBrowserRouter

const router = createBrowserRouter([
 {
  path:"/login",
  element:<Login/>
 },
 {
  path:"/article",
  element:<Article/>
 }
])

export default router
```
3.index.js
```java
// 导入路由router
import router from "./router"
 <RouterProvider router = {router}></RouterProvider>
```
## 三：路由导航
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/c9de4a59-d28b-4777-85c8-52575551d065.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/4c2701db-80a4-42b7-80bf-ff3c48779748.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/91a8f644-308e-4cad-b3eb-271b9f04d706.png)
```java
import {Link,useNavigate} from "react-router-dom"
const Login = ()=>{
  const navigate = useNavigate()
  return(
     <div>
       我是登录页
       // 声明式写法
       <Link to = "/article">跳转到文章页</Link>
       // 命令式写法
       <button onClick={() => navigate("/article")}>跳转到文章页</button>
      </div>
  ) 
}
export default Login
```
## 四：导航跳转传参
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/8ef2465a-5cd1-42e0-83b7-86b30fa9e854.png)
```java
<button onClick={() => navigate("/article?id=1001&name=jack")}>searchParams传参</button>
```
Article-index.js
```java
import {useSearchParams} from "react-router-dom"
const Article =()=>{
 const [params] = useSearchParams()
 const id = params.get("id")
 const id = params.get("name")
 return <div>我是文章项{id}-{name}</div>
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/b51d33a0-3556-4035-b661-1a857f84a577.png)
```java
<button onClick={() => navigate("/article/1001/jack")}>params传参</button>
```
index.js
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/524d33d7-e938-4c25-aadf-6d9a8705b7b4.png)
Article-index
```java
import {useSearchParams} from "react-router-dom"
const Article =()=>{
 const params = useParams()
 const id = params.id
 const name = params.name
 return <div>我是文章项{id}-{name}</div>
}
```
## 五：嵌套路由配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/5df065a6-88b0-437e-9176-10a9a1cb7d97.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/5425f354-25e7-4102-89ef-2c98e13881da.png)
page下新增三个路由组件 三个文件夹 - Layout -index.js
```java
import {Outlet} from "react-router-dom"
const Layout = ()=>{
 return(
   <div>
     我是一级路由layout组件
     <link to = "/board">面板</link>
      <link to = "/about">关于</link>
     // 配置二级路由出口
     <Outlet/>
   </div>
 )
}
export default Layout
```
page下新增三个路由组件 三个文件夹 - About -index.js
```java
const About = ()=>{
 return(
   <div>
     我是关于页
   </div>
 )
}
export default About
```
page下新增三个路由组件 三个文件夹 - Board -index.js
```java
const Board = ()=>{
 return(
   <div>
     我是面板
   </div>
 )
}
export default Board
```
router - index
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/c49adee2-6937-4a5a-820a-25cf66ee1ec3.png)
## 六：默认二级路由配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/a502b257-47fd-4775-a6de-a2336a39b45b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/5542c674-4c96-44f9-85ac-36c5a0dfdafc.png)
page-layout-index.js
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/4f99954d-cc47-4bd5-8112-4ef272e699ea.png)
## 七：404路由配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/55fd418d-da0d-49db-b056-1f78566b6a0e.png)
page-NotFound-index.js
```java
const NotFound =()=>{
  return <div>页面跑到月球了</div>
}
export default NotFound
```
index.js
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/1b13f932-b808-4174-b625-2def59fbf25b.png)
## 八：两种路由模式
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/24323aeb-3122-4d5c-b061-b1bfd6879121.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/d3da49a3-c061-4a12-9d9f-aee7798fc8d3.png)

#### 1.
#### 2.
#### 3.
#### 4.
#### 5.
```java
```
```java
```
```java
```
```java
```
```java
```