失败处理|嵌套路由|Link 组件

失败处理(自定义)

• 失败处理：当路由匹配不到任何路径时，会触发失败处理

src
├── error.jsx

(1) 新建 error.jsx

function ErrorPage() {
  return (
    <div>
      <h1>404 Not Found</h1>
    </div>
  );
}

export default ErrorPage;

(2) 绑定到路由上面

• router.jsx 里面修改

import React from "react";

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

import ErrorPage from "../error";

const router = createBrowserRouter([
  // 2. 路由配置
  {
    path: "/",
    element: <h1>欢迎你,ReactRouter</h1>,
    errorElement: <ErrorPage></ErrorPage>,
  },
]);

export default router;

嵌套路由

• 嵌套路由：路由里面嵌套路由，子路由

src
├── layOut
│   ├── Layout.jsx
├── views
│   ├── index.jsx
│   ├── Page1.jsx
│   ├── Page2.jsx

LayOut.jsx

• Outlet 组件：用于渲染子路由

import { Outlet } from "react-router-dom";
function LayOut() {
  return (
    <div>
      <h1>Layout</h1>
      <p>这是Layout组件</p>
      <div>-------下面是子路由----------</div>
      <Outlet />
    </div>
  );
}

export default LayOut;

index.jsx|Page1.jsx|Page2.jsx

• 默认页面

function IndexPage() {
  return <div>默认页面</div>;
}

export default IndexPage;

• Page1.jsx

function Page1() {
  const gotourl = () => {
    console.log("跳转到路由2");
  };
  const gotourlcanshu = () => {
    console.log("携带参数跳转到路由2");
  };
  return (
    <div>
      路由1的页面
      <button onClick={gotourl}>跳转到路由2</button>
      <button onClick={gotourlcanshu}>携带参数跳转到路由2</button>
    </div>
  );
}

export default Page1;

• Page2.jsx

function Page2() {
  const gotourl = () => {
    console.log("跳转到路由1");
  };
  const gotourlcanshu = () => {
    console.log("携带参数跳转到路由1");
  };
  return (
    <div>
      路由1的页面
      <button onClick={gotourl}>跳转到路由2</button>
      <button onClick={gotourlcanshu}>携带参数跳转到路由2</button>
    </div>
  );
}

export default Page2;

Router.jsx

修改 router.jsx

import React from "react";

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

import ErrorPage from "../error";

import LayOut from "../layOut/Layout";

import Page1 from "../views/Page1";

import Page2 from "../views/Page2";

// 默认页面

import IndexPage from "../views/index";

const router = createBrowserRouter([
  // 2. 路由配置
  {
    path: "/",
    element: <LayOut></LayOut>,
    errorElement: <ErrorPage></ErrorPage>,
    children: [
      {
        index: true,
        element: <IndexPage></IndexPage>,
      },
      {
        path: "/page1",
        element: <Page1></Page1>,
      },
      {
        path: "/page2",
        element: <Page2></Page2>,
      },
    ],
  },
]);

export default router;

跳转路由

• Link 组件：用于跳转路由 但是获取不到样式

• NavLink 组件：用于跳转路由 获取到样式,并且可以自定义样式

• 方法

Link

<Link to={`/page1`}>link跳转到page1</Link>

NavLink

 <NavLink
    to={`/page1`}
    className={({ isActive, isPending }) =>
      isActive ? "active" : isPending ? "pending" : ""
      }
>
  NavLink点击我跳转
</NavLink>

方法跳转

• useNavigate

// 跳转函数
const navigate = useNavigate();
const gotourl = () => {
  console.log("跳转到路由2");
  navigate(`/page2`);
};