7-ReactRouter

ReactRouter

Posted at 2025-03-31

一：

npx create-react-app react-router-pro
npm i react-router-dom
npm run start

index.js

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>
)

二：抽象路由模块

1.src-page-Login Article 文件夹 --分别index.js
Article-index.js

const Article = ()=>{
  return <div>我是文章页</div>

  export default Article
}

const Login = ()=>{
  return <div>我是登录页</div>

  export default Login
}

2.src-router-index.js

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

// 导入路由router
import router from "./router"
 <RouterProvider router = {router}></RouterProvider>

三：路由导航

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

四：导航跳转传参

<button onClick={() => navigate("/article?id=1001&name=jack")}>searchParams传参</button>

Article-index.js

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>
}

<button onClick={() => navigate("/article/1001/jack")}>params传参</button>

index.js

Article-index

import {useSearchParams} from "react-router-dom"
const Article =()=>{
 const params = useParams()
 const id = params.id
 const name = params.name
 return <div>我是文章项{id}-{name}</div>
}

五：嵌套路由配置

page下新增三个路由组件三个文件夹 - Layout -index.js

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

const About = ()=>{
 return(
   <div>
     我是关于页
   </div>
 )
}
export default About

page下新增三个路由组件三个文件夹 - Board -index.js

const Board = ()=>{
 return(
   <div>
     我是面板
   </div>
 )
}
export default Board

router - index

六：默认二级路由配置

page-layout-index.js

七：404路由配置

page-NotFound-index.js

const NotFound =()=>{
  return <div>页面跑到月球了</div>
}
export default NotFound