React Router路由总结

一、路由安装

# npm 安装
npm install react-router-dom
# yarn 安装
yarn add react-router-dom
# pnpm 安装
pnpm add react-router-dom

二、组件创建的路由

写法一：

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'

// 使用组件包裹
<BrowserRouter>
    <Routes>
       <Route path='/' element={<App />}></Route>

       <Route path='/demo' element={<React />}></Route>

    </Routes>

</BrowserRouter>

写法二：可以使用Hook简写

function Router(){
  return useRoutes([
      {
        path: "/",
        element: <App />,
      },
      {
        path: "/demo",
        element: <React />,
      }
  ]);
}
export default Router;

// 在main.tsx中加载
import Router from './router'
<BrowserRouter>
   <Router />
</BrowserRouter>

三、通过API创建路由

import { createBrowserRouter, RouterProvider} from "react-router-dom";

// 创建路由
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/demo",
    element: <React />,
  }]);

// 传递给RouterProvider
<RouterProvider router={router} />

四、动态路由

{
    path: '/order/:orderId',
    element: <Order/>
}


{
    path: '/goods/:goodsId/order/:orderId',
    element: <Order/>
}

function Order(){
    const params = useParams();
    return <div>
        <h2>商品组件</h2>

        <p>
            <span>商品ID：{params.goodsId}</span>

            <span>订单ID：{params.orderId}</span>

        </p>

    </div>

}

五、嵌套路由

{
  path: '/goods',
  element: <Goods />,
  children: [
    {
      path: 'list',
      element: (
        <div>
          <p>商品一</p>

          <p>商品二</p>

        </div>

      )
    }
  ]
}

// 组件定义
function Goods() {
  return (
    <div>
      <h2>商品主页</h2>

      <Outlet />
    </div>

  )
}

六、Data API

只有API创建的路由才有，组件创建的路由没有Data API

Loader拦截

{
      path: '/order/:id',
      element: <Order />,
      loader: orderLoader
}


function orderLoader({ params }: any) {
  return params.id;
}

Action提交

// 路由定义，定义action
{
    path: '/login',
    element: <Login />,
    action: loginAction
}


// 表单组件定义，提交以后，会触发action
function Login() {
  const errors: any = useActionData()
  return (
    <Form method='post'>
      <p>
        <input type='text' name='email' />
        {errors?.email && <span>{errors.email}</span>}
      </p>

      <p>
        <input type='text' name='password' />
        {errors?.password && <span>{errors.password}</span>}
      </p>

      <p>
        <button type='submit'>登录</button>

      </p>

    </Form>

  )
}


async function loginAction({ request }: any) {
  const formData = await request.formData()
  const email = formData.get('email')
  const password = formData.get('password')
  // TODO
  console.log('创建用户成功')
  return redirect('/')
}