React-router

一、路由的基本使用

// 引入两个组件
import Home from "./Home";
import About from "./About";
import {HashRouter,BrowserRouter, Link, Route, Routes} from "react-router-dom";

// 进行路由配置

function App() {
   return (
      // 声明当前要用一个菲hash模式的路由
      <HashRouter>
         {/* 指定跳转的组件 to用来配置路由的地址 */}
         <Link to='/'>首页</Link>
         <Link to='/about'>关于</Link>
         {/* 路由出口 路由对应的组件会在这里进行渲染 */}
         <Routes>
            {/* 指定路径和组件的对应关系 */}
            <Route path='/' element={<Home/>}></Route>
            <Route path='/about' element={<About/>}></Route>
         </Routes>
      </HashRouter>
   );
}

export default App

二、编程式导航实现路由跳转

1.基本使用

// 1.导入useNavigate函数
import {useNavigate} from "react-router-dom";

function Login() {
   // 2. 执行useNavigate得到一个跳转函数
   const navigate = useNavigate()
   // 跳转带关于页
   let goAbout = () => {
      // 3.调用跳转函数传入目标路径  replace不会有历史记录
      navigate('/about', {replace: true})
   }

   return (
      <div>
         <p>login</p>
         <button onClick={goAbout}>跳转到关于页</button>
      </div>
   )
}

export default Login

2.携带参数

// useSearchParams传参    路由形式：http://localhost:3000/#/about?id=1001
import {useSearchParams} from "react-router-dom";

function About() {
   const [params] = useSearchParams()
   /*
   * params是一个对象 对象里面有一个get方法
   * 用来获取对应的参数
   * 把参数的名称作为get方法的实参传过来
   * */
   console.log(params)
   const id = params.get('id')
   return (
      <div>about得到的参数id值为{id}</div>
   )
}

export default About



// params传参    路由形式：http://localhost:3000/#/about/1001
import {useParams} from "react-router-dom";

function About() {
   const params = useParams()
   console.log(params)
   return (
      <div>about得到的参数id值为{params.id}</div>
   )
}

export default About

3.嵌套路由

// Layout.js 
import {Outlet} from "react-router-dom";

function Layout(){
   return(
      <div>
         Layout
      {/*  二级路由出口 */}
         <Outlet></Outlet>
      </div>
   )
}
export default Layout


// App.js
import Login from "./Login";
import Layout from "./Layout";
import Board from "./Board";
import Article from "./Article";
import { BrowserRouter,Route, Routes} from "react-router-dom";

function App() {
   return (
      <BrowserRouter>
         <Routes>
             
            <Route path='/' element={<Layout/>}>
               {/* 定义二级路由嵌套,同时要在Layoyt.js里配置二级路由出口，否则二级路由内容不会显现*/}
               <Route path='board' element={<Board/>}></Route>
               <Route path='article' element={<Article/>}></Route>
            </Route>
             
            <Route path='/login' element={<Login/>}></Route>
             
         </Routes>
      </BrowserRouter>
   );
}

export default App

4.默认二级路由设置

 {/* 默认二级 添加index属性 把自己的path干掉 */}
 <Route index element={<Board/>}></Route>

5.404页面配置

 <Route path='*' element={<NotFond/>}></Route>