React Router

路由配置

path 路由路径

element 组件

children 子路由

const router = createHashRouter([
  {
    // path 路径
    path: "/",
    // element react或dom结构
    element: <Index></Index>,
    children: [
      {
        // 配置默认路由不用谢path
        element: <IndexChildren1></IndexChildren1>,
        index: true
      },
      {
        path: "/indexChildren2",
        element: <IndexChildren2></IndexChildren2>,
      },
    ]
  },
  {
    path: "/about",
    element: <About></About>,
  },
  {
    // 路由跳转
    path: "/info",
    element: <Navigate to="/about" replace></Navigate>,
    errorElement: <div>错误</div>, // 错误页面
  },
  {
    // /:参数名 通过useParams获取
    path: "/home/:name/:age",
    element: <Home></Home>,
  },
  // 404配置
  {
    path: "*",
    element: <div>404</div>,
  }
]);

Outlet用于展示子路由

Index.jsx内容

import { useNavigate, Link, Outlet } from "react-router-dom"
import {useSelector} from "react-redux"
export default function Index () {
  const navigate = useNavigate();
  const counter= useSelector(state => state.counter);
  const gotoHome = () => {
    // 编程式导航 replace 替换当前路由
    // navigate("/home")
    navigate("/home/zs/18888?id=11111&sex=男", {state:{name:"张三", age:18}, replace:false})
  }
  return (
    <div>
      <h1>Hello World</h1>
      <button onClick={gotoHome}>goto Home</button>
      <Link to={"/indexChildren2"}>index2</Link>
      <Outlet></Outlet>
    </div>
  )
}

接收路由参数

Home.jsx内容

// 获取传递的参数
import { useSearchParams, useLocation, useParams } from 'react-router-dom'
export default function Home() {
  const [params] = useSearchParams()
  // useSearchParams 获取url参数即？后面拼接的内容
  const id = params.get('id') // get方法获取参数
  const sex = params.get('sex')
  // useLocation 获取state参数
  const location = useLocation()
  // useParams 获取路由参数 /:参数名
  const p = useParams()
  console.log(location)
  return (
    <div>
      <h1>Home</h1>
      <h1>
        {id}
        {sex}
      </h1>
      <h1>{location.state.name + '' + location.state.age}</h1>
      <h1>{p.name}</h1>
      <h1>{p.age}</h1>
    </div>
  )
}

使用Routes和Routes进行配置

根路径文件index.js

<React.StrictMode>
  <BrowserRouter>
    <Provider store={store}>
      <App></App>
    </Provider>
  </BrowserRouter>
 </React.StrictMode>

App.js

import Index from "./views/index";
import IndexChildren1 from "./views/indexChildren1";
import About from "./views/about";
import IndexChildren2 from "./views/indexChildren2";
import Home from "./views/home";
import { Routes, Route, Navigate } from "react-router-dom";
import { lazy, Suspense } from "react"
// import NotFound from './views/NotFound';
import AdminPage from "./views/AdminPage";
// 懒加载
const NotFound = lazy(() => import('./views/NotFound'));
function App() {
  const isAdmin = true;
  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes >
          <Route exact path="/" element={<Index />} >
            <Route exact path="/" element={<IndexChildren1 />}></Route>
            <Route exact path="/indexChildren2" element={<IndexChildren2 />}></Route>
          </Route >
          <Route exact path="/home/:name/:age" element={<Home />}></Route>
          {/* 路由守卫 */}
          <Route exact path="/About" render={() => (isAdmin ? <AdminPage /> : <Navigate to="/" replace />)} element={<About />}></Route>
          <Route exact path="/Info" element={<Navigate to="/About" replace />}></Route>
          <Route path="*" element={<NotFound />} />
          {/* 未匹配到的重定向到404 */}
        </Routes >
      </Suspense>
    </>

  );
}

export default App;