react-router 入门教程

为什么使用路由？其实路由就是用来管理应用显示哪个页面 (组件) 的工具。

不同于我们自己用某些变量控制用户该看到哪些页面，路由是以 url 路径为标志，不同的 url 路径显示不同的页面。

创建 react app

npx create-react-app react-router-6-tutorial

安装 react-router6

npm install react-router-dom

使用

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

function App() {

  const router = createBrowserRouter([
    {
      path: "/",
      element: <Login />,
    },
    {
      path: "/list",
      element: <ProjectList />
    }
  ]);

  return (
    <RouterProvider router={router} />
  )
}

在 login 组件内

import { useNavigate } from "react-router-dom";

export function Login(props: any) {
  const navigate  = useNavigate()


  function childLogin() {
    navigate("/list")
  }

  return (
    <>
      {!isLogin && <button onClick={childLogin}>登录</button>}
    </>
  )
}