20230603----重返学习-react路由导航-路由传参-react-router-dom的V6版本

最新推荐文章于 2024-05-27 16:42:52 发布
最新推荐文章于 2024-05-27 16:42:52 发布
阅读量475 收藏
点赞数
分类专栏： 重返学习 React 文章标签： react.js javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/131027736
版权

day-084-eighty-four-20230603-react路由导航-路由传参-react-router-dom的V6版本

react路由导航

编码式导航

  • 编码式导航：基于JavaScript实现路由的跳转。

  • 编码式导航：基于JavaScript实现路由的跳转。实际上是基于props中history对象中的相关方法实现路由跳转的。

  • 在路由当中：

    • 受控组件：受路由管控的组件，也就是基于Route组件进行路由匹配而渲染的组件。
    • 非受控组件：不是基于Route组件匹配渲染的组件。

  • 在react-router-dom的V5版本中：

    • 如果是受控组件，则路由内容，会给每个组件传递三个属性：

      • history 提供了路由跳转的方式。

        • push：跳转路由与新增历史记录。
        • replace：跳转路由与替换当前的历史记录。
        • go：跳转到历史记录中指定位置。
        • goBack：回退一步 -> go(-1);
        • goForward：前进一步 -> go(1);
        • …

      • location：记录当前路由的信息。

        • pathname：当前路由地址。
        • search：当前路由的问号传参信息。
        • state：当前路由的隐式传参信息。
        • …

      • match：记录当前路由匹配的规则与匹配记录。

        • params：存储匹配的路径参数信息。
        • …

    • 如果是非受控组件，默认不会传递这三个属性。

      • 这样就有一个问题：在非受控组件中，如何实现编程式导航？

        1. 基于路由内部提供的withRouter()高阶组件，把非受控组件变为受控组件。

          • 或者说让非受控组件，也具备这三个属性信息，可适用于任何类型的组件。
          import { withRouter } from "react-router-dom";
const CommonMenu = function CommonMenu(props) {
  console.log(`CommonMenu-props`, props);
  return <div></div>
}
export default withRouter(CommonMenu);

        2. 基于路由提供的useHistory()/useLocation()/useParams()/useRouteMatch()等Hook函数，在函数组件中获取对应的信息！

          • useHistory() -> history对象。
          • useLocation() -> location对象。
          • useRouteMatch() -> match对象。
          • useParams() -> 获取基于路径传参的信息。
        • 以上知识，必须有一个前提：所处理的组件，不管是受控还是非受控，必须都在HashRouter()/BrowserRouter()等Router的内部！

路由传参

  • 路由跳转传参的方式：
    • 例如从A组件跳转到B组件，需要给B组件传递一些参数信息。

      1. 基于问号传参传递信息。

        • 传递的信息在URL地址栏中可以看见(明文)。
          • 丑、不安全、有长度限制。
        • 传递的信息都要变为urlencoded格式字符串，接收的时候也需要处理这样的字符串。
          • 可以基于qs库或者new URLSearchParams()处理。
        • 在跳转后的目标组件进行刷新操作，因为传递的信息在地址栏中有，所以依然可以获取问号传参信息。

      2. 基于隐式传参传递信息。

        • 传递的信息在URL地址栏中看不见。
          • 不丑、安全、没有长度限制。
        • 可以传递任何格式的数据。
        • 在跳转后的目标组件进行刷新操作，因为地址栏中没有传递的信息，那么之前传递的信息就消失了。

      3. 基于路径参数传递信息，把传参信息作为地址的一部分。

        • 和问号传参一样，也是要把传递的信息放在URL地址栏中，所以相关特点和问号传参几乎一致。
          • 只不过这种模式看上去比问号传参美观一些。
        • 步骤：
          • 第一步：修改路由匹配的规则。
            • path: '/home/message' 旧写法。
            • path: '/home/message/:lx?/:name?' 新写法。
              • : 说明是传递的参数。
              • ? 可传可不传。
          • 第二步：跳转的时候，把需要传递的值，作为地址的一部分；接收信息的时候，基于 match.params/useParams() 处理即可！

对问号传参的urlencoded格式字符串信息处理

路由懒加载

  • 默认情况下，我们会把所有组件的代码全部打包到一个js文件中-即主js文件。这样当页面第一次渲染的时候，需要从服务器获取这个主js文件才能执行，但是因为其文件过大，需要加载很长时间，在此期间内，页面呈现白屏。

    • 为了加快页面第一次渲染的速度，我们只把默认需要展示的组件打包到主js文件中，让主js文件小一些，其余组件的代码单独打包到别的js文件中，刚开始加载页面的时候不加载这些代码。
      • 当基于路由切换，需要加载某个组件的时候，再动态的从服务器获取对应的js文件或对应的代码，进行渲染！
      • 我们把以上这种优化手段，称之为路由懒加载。
        • 这个是前端必做的性能优化之一。

  • 路由懒加载步骤：

    1. 基于React.lazy、ES6中的import函数、/webpackChunkName:‘home’/，保证webpack打包后的时候，可以把各个组件代码打包到不同的js文件中！页面渲染的时候，最开始只加载主js文件。
      • 路由切换时，会再加载其它基于webpackChunkName的的js文件。
    2. 基于React.Suspense来处理动态加载的组件或异步组件，只有这样才能把异步组件中加载出来。
      • fallback: 在异步组件没有渲染出来之前，先展示fallback中的信息，异步组件渲染出来后，fallback中的信息就会销毁！

  • 在jsx文件及js代码中，使用src引入文件如图片这类需要使用文件地址时，要先用ES6把相对路径的文件导入进来再引用。或者使用绝对路径。

  • 在css或less时，使用图片这类需要使用文件地址时，是可以直接使用相对路径的。

组件封装-loading

react-router-dom的V6版本

react路由V6版本-基础版文件结构

  • 文件结构
    • React阶段/day0603_router6/src/index.jsx
    • React阶段/day0603_router6/src/App.jsx 构建一级路由
    • React阶段/day0603_router6/src/layout 布局类组件放置处，实际上这里放的大多为一级路由对应的组件。
      1. 因为布局类的文件大多是一级路由对应的组件。
      2. 个人2023年感觉很多项目是这样拆分的，这样可以让文件更明确些。
        • 个人做过的项目和参考的项目大多是这样布置的。
        • 理论上，也都可以全部放在views文件夹下。
      3. 放在这里，也可以让项目层级减少一层。
      4. 这个理论上可以凭个人喜好来。
      • React阶段/day0603_router6/src/layout/BasicLayout.jsx
      • React阶段/day0603_router6/src/layout/Error.jsx
      • React阶段/day0603_router6/src/layout/UserLayout.jsx
    • React阶段/day0603_router6/src/views 页面组件，一般是二级及以下的业务组件。
      • React阶段/day0603_router6/src/views/home 二级路由组件-Home.jsx下的三级路由组件。
        • React阶段/day0603_router6/src/views/home/Message.jsx
        • React阶段/day0603_router6/src/views/home/Watch.jsx
        • React阶段/day0603_router6/src/views/home/Worker.jsx
      • React阶段/day0603_router6/src/views/Category.jsx
      • React阶段/day0603_router6/src/views/Home.jsx
      • React阶段/day0603_router6/src/views/Login.jsx
      • React阶段/day0603_router6/src/views/Personal.jsx
      • React阶段/day0603_router6/src/views/Register.jsx

react路由V6版本-基础版路由代码

  • 文件结构

    • React阶段/day0603_router6/src/index.jsx

      import React from "react";
import ReactDOM from "react-dom/client";
/* ANTD */
import { ConfigProvider } from "antd";
import zhCN from "antd/locale/zh_CN";
/* 组件&样式 */
import "./index.less";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ConfigProvider locale={zhCN}>
    <App />
  </ConfigProvider>
);

    • React阶段/day0603_router6/src/App.jsx 主视图文件，构建一级路由。

      import React from "react";

// 1. 引入HashRouter, Routes, Route, Navigate等react-router-dom提供的组件。引入HashRouter用于把组件包起来，Routes用于设置路由信息组-把多条路由信息组合成一组以便只渲染一个路由视图，Route用于设置单条路由信息，Navigate用于与Route配合起来设置重定向。
import { HashRouter, Routes, Route, Navigate } from "react-router-dom";

// 2. 引入路由需要用到的业务视图组件。
import BasicLayout from "./layout/BasicLayout";
import UserLayout from "./layout/UserLayout";
import Error from "./layout/Error";
import Login from "./views/Login";
import Register from "./views/Register";
import Home from "./views/Home";
import Personal from "./views/Personal";
import Category from "./views/Category";
import Watch from "./views/home/Watch";
import Worker from "./views/home/Worker";
import Message from "./views/home/Message";

const App = function App() {
  // 3. 构建路由。
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<BasicLayout />}>
          <Route path="" element={<Navigate to="/home" />} />
          <Route path="home" element={<Home />}>
            <Route path="" element={<Navigate to="/home/watch" />} />
            <Route path="watch" element={<Watch />} />
            <Route path="worker" element={<Worker />} />
            <Route path="message" element={<Message />} />
          </Route>
          <Route path="category" element={<Category />} />
          <Route path="personal" element={<Personal />} />
        </Route>
        <Route path="/user" element={<UserLayout />}>
          <Route path="" element={<Navigate to="/user/login" />} />
          <Route path="login" element={<Login />} />
          <Route path="register" element={<Register />} />
        </Route>
        <Route path="/404" element={<Error />} />
        <Route path="*" element={<Navigate to="/404" />} />
      </Routes>
    </HashRouter>
  );
};
export default App;

    • React阶段/day0603_router6/src/layout

      • React阶段/day0603_router6/src/layout/BasicLayout.jsx 一级路由组件。

        import { useState } from "react"
import { Menu, Button } from "antd"
import { HomeOutlined, ClusterOutlined, UserOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import styled from "styled-components"
import logo from "@/assets/images/logo.svg"
import avatar from "@/assets/images/touxiang.png"
import { Outlet } from "react-router-dom"

/* 组件样式 */
const BasicLayoutStyle = styled.div`
    height: 100%;
    overflow: hidden;

    .header{
        box-sizing: border-box;
        padding: 0 15px;
        height: 48px;
        background: #001529;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo,
        .info{
            line-height: 48px;
            font-size: 18px;
            color: #FFF;
            display: flex;
            align-items: center;

            img{
                margin-right: 10px;
                width: 35px;
                height: 35px;
            }
        }

        .info{
            font-size: 14px;

            img{
                width: 30px;
                height: 30px;
            }
        }
    }

    .content{
        height: calc(100% - 48px);
        display: flex;

        .menu-box{
            height: 100%;
            background: #001529;

            .ant-btn{
                margin-left: 4px;
                background: transparent;
                box-shadow: none;
            }

            .ant-menu-item{
                padding: 0 24px;
            }

            .ant-menu-inline-collapsed{
                .ant-menu-item{
                    padding: 0 28px;
                }
            }
        }

        .view-box{
            box-sizing: border-box;
            padding: 15px;
            height: 100%;
            flex-grow: 1;

            .component{
                height: 100%;
                overflow-y: auto;
                overflow-x: hidden;
                background: #FFF;
            }
        }
    }
`

const BasicLayout = function BasicLayout() {
    // 左侧Menu的数据
    const menuItem = [{
        key: 'home',
        label: '控制面板',
        icon: <HomeOutlined />
    }, {
        key: 'category',
        label: '分类管理',
        icon: <ClusterOutlined />
    }, {
        key: 'personal',
        label: '个人中心',
        icon: <UserOutlined />
    }]

    // 定义状态
    let [collapsed, setCollapsed] = useState(false)

    return <BasicLayoutStyle>
        <div className="header">
            <h2 className="logo">
                <img src={logo} alt="" />
                Ant Design
            </h2>
            <div className="avatar">
                <p className="info">
                    <img src={avatar} alt="" />
                    海贼王-路飞
                </p>
            </div>
        </div>
        <div className="content">
            <div className="menu-box">
                <Button type="primary"
                    onClick={() => {
                        setCollapsed(!collapsed)
                    }}>
                    {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                </Button>
                <Menu mode="inline" theme="dark"
                    items={menuItem}
                    defaultSelectedKeys={['home']}
                    inlineCollapsed={collapsed} />
            </div>
            <div className="view-box">
                <div className="component">
                    {/* 主页的二级路由 */}
                    <Outlet />
                </div>
            </div>
        </div>
    </BasicLayoutStyle>
}
export default BasicLayout

      • React阶段/day0603_router6/src/layout/Error.jsx 一级路由组件。

        import React from "react";
import { Button, Empty } from "antd";
import styled from "styled-components";

/* 组件的样式 */
const ErrorStyle = styled.div`
  height: 100%;
  overflow: hidden;

  .ant-empty {
    position: relative;
    top: 100px;
  }
`;

const Error = function Error() {
  return (
    <ErrorStyle>
      <Empty description={<span>很遗憾，您访问的页面不存在！</span>}>
        <Button type="primary">返回首页</Button>
      </Empty>
    </ErrorStyle>
  );
};
export default Error;

      • React阶段/day0603_router6/src/layout/UserLayout.jsx 一级路由组件。

        import React from "react";
import { Tabs } from "antd";
import styled from "styled-components";
import backgroundImg from "@/assets/images/background.svg";
import logo from "@/assets/images/logo.svg";
import { Outlet } from "react-router-dom";

/* 组件样式 */
const UserLayoutStyle = styled.div`
  position: relative;
  height: 100%;
  background: url(${backgroundImg}) no-repeat;
  background-size: 100%;

  .content {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -165px;
    width: 330px;
  }

  .header {
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 44px;
      font-size: 33px;
      font-weight: normal;

      img {
        margin-right: 10px;
        width: 44px;
        height: 44px;
      }
    }

    .subtitle {
      margin: 12px 0 40px 0;
      text-align: center;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
    }
  }

  .ant-tabs {
    margin-bottom: 10px;

    .ant-tabs-nav {
      &:before {
        border-bottom-color: #ddd;
      }
    }

    .ant-tabs-tab {
      padding: 0 10px;
      font-size: 16px;
      line-height: 40px;
    }
  }
`;

const UserLayout = function UserLayout() {
  // Tab页卡的数据
  const tabItem = [
    {
      label: `用户登录`,
      key: "login",
    },
    {
      label: `用户注册`,
      key: "register",
    },
  ];

  return (
    <UserLayoutStyle>
      <div className="content">
        <div className="header">
          <h1 className="title">
            <img src={logo} alt="" />
            <span>Ant Design</span>
          </h1>
          <p className="subtitle">
            Ant Design 是西湖区最具影响力的 Web 设计规范
          </p>
        </div>
        <Tabs centered defaultActiveKey="login" items={tabItem} />
        {/* 登录/注册二级路由的位置 */}
        <Outlet />
      </div>
    </UserLayoutStyle>
  );
};
export default UserLayout;

    • React阶段/day0603_router6/src/views 页面组件，一般是二级及以下的业务组件。

      • React阶段/day0603_router6/src/views/home 二级路由组件-Home.jsx下的三级路由组件。

        • React阶段/day0603_router6/src/views/home/Message.jsx

          import React from "react";
const Message = function Message() {
  return <div>控制面板 - 消息中心</div>;
};
export default Message;

        • React阶段/day0603_router6/src/views/home/Watch.jsx

          import React from "react";
const Watch = function Watch() {
  return <div>控制面板 - 数据监控</div>;
};
export default Watch;

        • React阶段/day0603_router6/src/views/home/Worker.jsx

          import React from "react";
const Worker = function Worker() {
  return <div>控制面板 - 工作台</div>;
};
export default Worker;

      • React阶段/day0603_router6/src/views/Category.jsx

        import React from "react";
const Category = function Category() {
  return <div>分类管理的内容</div>;
};
export default Category;

      • React阶段/day0603_router6/src/views/Home.jsx 二级路由组件。

        import React from "react";
import styled from "styled-components";
import { NavLink, Outlet } from "react-router-dom";

/* 组件样式 */
const HomeStyle = styled.div`
  padding: 10px;

  .nav-box {
    display: flex;
    border-bottom: 1px solid #eee;

    a {
      padding: 0 20px;
      line-height: 40px;
      font-size: 15px;
      color: #000;

      &.active {
        color: #1677ff;
        font-size: 16px;
      }
    }
  }
`;

const Home = function Home() {
  return (
    <HomeStyle>
      <nav className="nav-box">
        <NavLink to="/home/watch">数据监控</NavLink>
        <NavLink to="/home/worker">工作台</NavLink>
        <NavLink to="/home/message">消息中心</NavLink>
      </nav>
      {/* 首页的三级路由 */}
      <Outlet />
    </HomeStyle>
  );
};
export default Home;

      • React阶段/day0603_router6/src/views/Login.jsx 二级路由组件。

        import React from "react";
import { Form, Input, Checkbox, Button } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import styled from "styled-components";

/* 组件的样式 */
const LoginStyle = styled.div`
  .remember {
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
      font-size: 14px;
      color: #1890ff;
    }
  }

  .submit {
    width: 100%;
  }
`;

const Login = function Login() {
  return (
    <LoginStyle>
      <Form
        autoComplete="off"
        initialValues={{
          account: "",
          password: "",
        }}
      >
        <Form.Item name="account">
          <Input
            size="large"
            placeholder="请输入账号"
            prefix={<UserOutlined />}
          />
        </Form.Item>
        <Form.Item name="password">
          <Input.Password
            size="large"
            placeholder="请输入密码"
            prefix={<LockOutlined />}
          />
        </Form.Item>
        <Form.Item>
          <div className="remember">
            <Checkbox checked>记住账号密码</Checkbox>
            <a href="">忘记密码？</a>
          </div>
        </Form.Item>
        <Form.Item>
          <Button className="submit" type="primary" size="large">
            立即登录
          </Button>
        </Form.Item>
      </Form>
    </LoginStyle>
  );
};
export default Login;

      • React阶段/day0603_router6/src/views/Personal.jsx

        import React from "react";
const Personal = function Personal() {
  return <div>个人中心的内容</div>;
};
export default Personal;

      • React阶段/day0603_router6/src/views/Register.jsx

        import React from "react";
import { Form, Input, Button } from "antd";
import { LockOutlined, PhoneOutlined } from "@ant-design/icons";
import styled from "styled-components";

/* 组件的样式 */
const RegisterStyle = styled.div`
  .submit {
    width: 100%;
  }

  .code-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ant-form-item {
      &:nth-child(1) {
        margin-right: 10px;
      }
    }
  }
`;

const Register = function Register() {
  return (
    <RegisterStyle>
      <Form
        autoComplete="off"
        initialValues={{
          phone: "",
          code: "",
        }}
      >
        <Form.Item name="phone">
          <Input
            size="large"
            placeholder="请输入手机号"
            prefix={<PhoneOutlined />}
          />
        </Form.Item>
        <div className="code-box">
          <Form.Item name="code">
            <Input
              size="large"
              placeholder="请输入验证码"
              prefix={<LockOutlined />}
            />
          </Form.Item>
          <Form.Item>
            <Button size="large">发送验证码</Button>
          </Form.Item>
        </div>
        <Form.Item>
          <Button className="submit" type="primary" size="large">
            立即注册
          </Button>
        </Form.Item>
      </Form>
    </RegisterStyle>
  );
};
export default Register;

react路由V6版本-基础版构建步骤

  1. 在主视图文件里引入构建一级路由。

    1. 引入HashRouter, Routes, Route, Navigate等react-router-dom提供的组件。
      • HashRouter用于把组件包起来。
      • Routes用于设置路由信息组-把多条路由信息组合成一组以便只渲染一个路由视图。
      • Route用于设置单条路由信息。
      • Navigate用于与Route配合起来设置重定向。
    2. 引入路由需要用到的业务视图组件。
    3. 使用HashRouter, Routes, Route, Navigate等及业务视图组件来构建路由。

      • <HashRouter></HashRouter> 所有需要用到路由信息的，都要用这个组件包起来。

      • <Routes></Routes> 包裹一组路由信息。

        1. 内部只能放<Route>标签，放其它标签会报错。
        2. 所有级别的路由匹配规则或路由表都写在一起。

      • <Route/>与<Route></Route> 用来设置一条路由信息。

        1. <Route></Route>内部可以嵌套<Route/>与<Route></Route>。

        2. 默认匹配规则类似于精准匹配。

        3. 被嵌套的<Route/>标签就是子级路由。

        4. 子级路由可以省略父级路由地址。

          • 不过子级路由以/开头，就会被认为是绝对路径。
          • 子级路由不以/开头，那么其前方就会自动添加上父级路由的地址。

        5. 要渲染的组件用element属性来设置，但element属性的值必须是一个组件标签的格式，而不能只是一个函数变量。

          <Route path="personal" element={<Personal />} />//一个组件标签的格式，是对的。

          <Route path="personal" element={Personal} />//一个函数变量，是错的。

        import React from "react";

// 1. 引入HashRouter, Routes, Route, Navigate等react-router-dom提供的组件。引入HashRouter用于把组件包起来，Routes用于设置路由信息组-把多条路由信息组合成一组以便只渲染一个路由视图，Route用于设置单条路由信息，Navigate用于与Route配合起来设置重定向。
import { HashRouter, Routes, Route, Navigate } from "react-router-dom";

// 2. 引入路由需要用到的业务视图组件。
import BasicLayout from "./layout/BasicLayout";
import UserLayout from "./layout/UserLayout";
import Error from "./layout/Error";
import Login from "./views/Login";
import Register from "./views/Register";
import Home from "./views/Home";
import Personal from "./views/Personal";
import Category from "./views/Category";
import Watch from "./views/home/Watch";
import Worker from "./views/home/Worker";
import Message from "./views/home/Message";

const App = function App() {
  // 3. 构建路由。
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<BasicLayout />}>
          <Route path="" element={<Navigate to="/home" />} />
          <Route path="home" element={<Home />}>
            <Route path="" element={<Navigate to="/home/watch" />} />
            <Route path="watch" element={<Watch />} />
            <Route path="worker" element={<Worker />} />
            <Route path="message" element={<Message />} />
          </Route>
          <Route path="category" element={<Category />} />
          <Route path="personal" element={<Personal />} />
        </Route>
        <Route path="/user" element={<UserLayout />}>
          <Route path="" element={<Navigate to="/user/login" />} />
          <Route path="login" element={<Login />} />
          <Route path="register" element={<Register />} />
        </Route>
        <Route path="/404" element={<Error />} />
        <Route path="*" element={<Navigate to="/404" />} />
      </Routes>
    </HashRouter>
  );
};
export default App;

      • <Route path="*" element={<Navigate to="/404" />} /> 用于设置路由跳转。

  2. 在父级路由匹配组件的指定位置，基于<Outlet/>组件把子级路由匹配的内容进行渲染！

    // 1. 引入Outlet组件。
import { Outlet } from "react-router-dom"

{/* 2. 在父级路由匹配组件的指定位置，基于`<Outlet/>组件`把子级路由匹配的内容进行渲染！ */}
<Outlet />

    import { useState } from "react"
import { Menu, Button } from "antd"
import { HomeOutlined, ClusterOutlined, UserOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import styled from "styled-components"
import logo from "@/assets/images/logo.svg"
import avatar from "@/assets/images/touxiang.png"

// 1. 引入Outlet组件。
import { Outlet } from "react-router-dom"

/* 组件样式 */
const BasicLayoutStyle = styled.div`
    height: 100%;
    overflow: hidden;

    .header{
        box-sizing: border-box;
        padding: 0 15px;
        height: 48px;
        background: #001529;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo,
        .info{
            line-height: 48px;
            font-size: 18px;
            color: #FFF;
            display: flex;
            align-items: center;

            img{
                margin-right: 10px;
                width: 35px;
                height: 35px;
            }
        }

        .info{
            font-size: 14px;

            img{
                width: 30px;
                height: 30px;
            }
        }
    }

    .content{
        height: calc(100% - 48px);
        display: flex;

        .menu-box{
            height: 100%;
            background: #001529;

            .ant-btn{
                margin-left: 4px;
                background: transparent;
                box-shadow: none;
            }

            .ant-menu-item{
                padding: 0 24px;
            }

            .ant-menu-inline-collapsed{
                .ant-menu-item{
                    padding: 0 28px;
                }
            }
        }

        .view-box{
            box-sizing: border-box;
            padding: 15px;
            height: 100%;
            flex-grow: 1;

            .component{
                height: 100%;
                overflow-y: auto;
                overflow-x: hidden;
                background: #FFF;
            }
        }
    }
`

const BasicLayout = function BasicLayout() {
    // 左侧Menu的数据
    const menuItem = [{
        key: 'home',
        label: '控制面板',
        icon: <HomeOutlined />
    }, {
        key: 'category',
        label: '分类管理',
        icon: <ClusterOutlined />
    }, {
        key: 'personal',
        label: '个人中心',
        icon: <UserOutlined />
    }]

    // 定义状态
    let [collapsed, setCollapsed] = useState(false)

    return <BasicLayoutStyle>
        <div className="header">
            <h2 className="logo">
                <img src={logo} alt="" />
                Ant Design
            </h2>
            <div className="avatar">
                <p className="info">
                    <img src={avatar} alt="" />
                    海贼王-路飞
                </p>
            </div>
        </div>
        <div className="content">
            <div className="menu-box">
                <Button type="primary"
                    onClick={() => {
                        setCollapsed(!collapsed)
                    }}>
                    {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                </Button>
                <Menu mode="inline" theme="dark"
                    items={menuItem}
                    defaultSelectedKeys={['home']}
                    inlineCollapsed={collapsed} />
            </div>
            <div className="view-box">
                <div className="component">
                    {/* 主页的二级路由 */}
                    {/* 2. 在父级路由匹配组件的指定位置，基于`<Outlet/>组件`把子级路由匹配的内容进行渲染！ */}
                    <Outlet />
                </div>
            </div>
        </div>
    </BasicLayoutStyle>
}
export default BasicLayout

与路由V5版本的区别

  • react-router-dom(V6)与react-router-dom(V5)对比

  1. 都是基于HashRouter()与BrowserRouter()来指定路由的模式，而且建议所有的组件都放在HashRouter()与BrowserRouter()这类Router中。

  2. V6版本中没有了<Switch>，因为不需要了，其内部自己做了类似于<Switch>的处理。

  3. V6中没有了<Redirect>，但是可以基于<Navigate to="/404"/>来代替它。

    • 在V5版本中，<Redirect />相当于特殊的<Route/>，我们是基于它设置重定向的规则的。
      • <Redirect from="*" to="/404" />
    • 在V6版本中，<Navigate/>是一个组件，渲染这个组件时会重定向到该组件的to属性指定的地址。
      • <Route path="*" element={<Navigate to="/404" />} />

  4. V6中也是基于<Route/>设置匹配规则，只不过都需要放在<Routes></Routes>中，而且在<Route/>上设置的详细规则，和V5版本有很大的区别：

    • 无需在<Route/>上设置exact属性用于进行精准匹配了，因为默认都是类似于精准匹配。
    • <Route/>上path属性和之前一样，设置对应的匹配地址。
    • 匹配成功后需要渲染那个组件不再基于<Route/>上component属性处理，而是基于<Route/>上element属性渲染，而且也没有了<Route/>上render函数属性这样的配置，element渲染的内容需要写成<Component/>这种格式！

      • <Routes></Routes>只能放<Route/>。

      • V5旧：

        import { HashRouter, BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
import BasicLayout from "./layout/BasicLayout"
import UserLayout from "./layout/UserLayout"
import Error from "./layout/Error"
<HashRouter>
    <Switch>
        <Route path="/user" component={UserLayout} />
        <Route path="/404" component={Error} />
        <Route path="/" component={BasicLayout} />
        <Redirect to="/404" />
    </Switch>
</HashRouter>
//或
<HashRouter>
  <Route path="/user" component={UserLayout} />
</HashRouter>

      • V6新：

        import { HashRouter, Routes, Route, Navigate } from "react-router-dom";

import BasicLayout from "./layout/BasicLayout";
import UserLayout from "./layout/UserLayout";
import Error from "./layout/Error";
<HashRouter>
  <Routes>
    <Route path="/" element={<BasicLayout />}></Route>
    <Route path="/user" element={<UserLayout />}></Route>
    <Route path="/404" element={<Error />} />
    <Route path="*" element={<Navigate to="/404" />} />
  </Routes>
</HashRouter>
//或
<HashRouter>
  <Routes>
    <Route path="/" element={<BasicLayout />}></Route>
  </Routes>
</HashRouter>

  5. V6有一个重大的变革：所有级别的路由匹配规则或路由表都写在一起，而不再像V5一样，需要分散到指定组件的特定位置上，这样有利于路由的统一管理！

    <Route path="/user" element={<UserLayout />}>
/* - 在`子级路由中`其path可以省略`父级路由的地址`
    - 但是也不要自己再加`/`
    - `path=""` 等价于 `path="/user"`
    - `path="login"`等价于 `path="/user/login"`
  - 如果路由地址是`/user/xxx`，首先和一级路由`/user`进行匹配了，渲染`UserLayout组件`后，进入`/user`的`子级路由`进行匹配；
    - 在`子级路由`中`一项项地进行匹配`，匹配成功，就把`子级路由`中`element属性指定的组件`，放在`UserLayout组件`中的`<Outlet>容器`中进行渲染！
    - 如果在`子级路由`中没有任何匹配的，则跳出这一级，继续向下匹配`与/user路由同级`的`其它的一级路由`！ */
    <Route path="" element={<Navigate to="/user/login" />} />
    <Route path="login" element={<Login />} />
    <Route path="register" element={<Register />} />
</Route>

    • 在子级路由中其path可以省略父级路由的地址。

      • 但是也不要自己再加/。
      • path="" 等价于 path="/user"。
      • path="login"等价于 path="/user/login"。

    • 如果路由地址是/user/xxx，首先和一级路由/user进行匹配了，渲染UserLayout组件后，进入/user的子级路由进行匹配；

      • 在子级路由中一项项地进行匹配，匹配成功，就把子级路由中element属性指定的组件，放在UserLayout组件中的<Outlet>容器中进行渲染！
      • 如果在子级路由中没有任何匹配的，则跳出这一级，继续向下匹配与/user路由同级的其它的一级路由！

    • 但是需要在上级路由匹配组件的指定位置，基于<Outlet/>把下级路由匹配的内容进行渲染！

进阶参考

方朝端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router-dom 嵌套路由的实现
10-15
主要介绍了react-router-dom 嵌套路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
4. react路由
友人A的博客
07-30 621
react路由
react路由配置react-router-dom v6版本
hs1219462412的博客
04-20 4610
一、安装 npm install react-router-dom -S 路由配置: import { hashRouter as Router, Routes, Route } from 'react-router-dom'; // Routes 就是v5版本的 Switch import PageA from './PageA'; // 页面A import PageB from './PageB'; // 页面B ​ export default function App(){ // 启动服务 访
【React】react-router-dom v5 与 v6 的区别
Eliaukoyx
07-18 1160
本文简单介绍两个版本的使用：v5 和 。其中：（1）v5 版本既兼容了类组件（react v16.8前），又兼容了函数组件（react v16.8及以后，即hook）（2）v6 文档把路由组件默认接受的三个属性给移除了，若仍然使用 this.props.history.push()，此时props会提示空值。官方文档给出的解决方案是使用 useNavigate 这个hook，但是 hook 只能存在于函数组件，无法用在类组件中 ...
react-router-dom(v6)使用记录
m18565890306的博客
07-12 521
在app.js入口文件引入本地路由 hooks 返回路由 本地路由 引入 {Routers Route} 引入本地组件 嵌套文件中的占位Outlet 编程模式获取参数 useParams 编程模式获取当前路由 useLocation 编程模式跳转模式 useNavigate 后台管理端菜单路由跳转，默认选中 刷新选中等等 实际效果 完整的react（18）+react-router-dom(v6)搭建开发...
React-Router v6 使用教学
陈书航的博客
04-20 2728
React-Router V6 出版一段时间，前端的小伙伴们也开始向着 v6 版本进行升级。v5 和 v6 的版本 api 有些差异。对此写一篇文档整理了下 v6 的使用教学，文章已实际使用为主。
react-router-dom v6 编程式路由导航
qq_60248719的博客
05-04 2086
注意：父子组件都必须是函数式组件 // 父组件 Message import React from 'react' import { Link, Route, Routes, useNavigate } from 'react-router-dom' import { Detail } from './Detail' export const Message = () => { const list = [ { id: '001', title: '消息1' }, { i.
react-router-dom v6编程式导航
sxp19980829的博客
03-21 776
react-router-dom v6编程式导航
ReactRouterV6获取当前路由参数
weixin_45620384的博客
03-25 6980
ReactRouterV6获取当前路由参数 1.由于v6把旧版本中的路由组件能收到的三个参数(Location，history，match)移除了，所以不能直接使用this.props.location.pathname获取到当前路由。而且withRouter也移除了 2.在v6获取当前路由，需要自己定义withRouter，代码如下 withRouter.js import {useLocation, useNavigate } from "react-router"; import React
react-router-dom使用指南（最新V6）
江咏之
08-17 2395
通过嵌套的书写Route组件实现对嵌套路由的定义。path开头为/的为绝对路径，反之为相对路径。可以在任何组件中使用Routes组件，且组件内的Routes中，路径默认带上当前组件的路径作为前缀。注意：此时定义父组件的路由时，要在后面加上/，否则父组件将无法渲染。}使用useRouteshook，可以使用一个JS对象而不是Routes组件与Route组件来定义路由。其功能类似于useRoutes的返回是 React Element，或是 null。children?element?index?...
react-router-with-props:自定义路由以响应路由器dom
05-10
import { PropsRoute, PublicRoute, PrivateRoute } from 'react-router-with-props'; 路线类型 PropsRoute-您可以传递道具的默认路线。 PublicRoute-它阻止对身份验证用户的访问，您可以将道具传递给它。 ...
React-router4路由监听的实现
10-18
主要介绍了React-router4路由监听的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入理解react-router 路由的实现原理
10-17
主要介绍了深入理解react-router 路由的实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-router-dom V6 中文文档教程总结
热门推荐
xm1037782843的博客
10-21 1万+
react-router-dom v6 使用文档教程 react-router-dom
React-Router6版本的更新引起的路由用法变化
sdasadasds的博客
01-18 2497
React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有45.2k的加星，足以说明它是一款非常优秀的库，作为React社区重要的库，它经历了多次迭代和重大更改，就在上个月，更是迎来了一个大的正式版更新6.x，当前最新为6.0.2，相对比于之前的5.x版本做出了较大改变，不管从用法还是从性能上都有了明显的提升，本文也将用新老版本对比的方式让你能以最快的速度上手新用法 话不多说，先列出6.0做出的改变之处： 用法变化 替换为 嵌套路由新写法 推出全新hoo
react普通类组件-在react-router6中使用编程式导航
qq_52179917的博客
03-03 475
难点： 在类组件中使用 hook: useLocation, useNavigate, useParams。之前在v5 中使用的时 withRouter 但是这个方法在 6中废弃。
react-router-domV6版本在js文件使用history跳转
qq_23207707的博客
07-11 2843
非React的上下文环境或全局变量中使用Router
【React Router v6】编程式路由导航（useNavigate）
Coding and studying
08-17 2201
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架本文被专栏收录🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！
基于 React + Nest 全栈开发的后台系统
最新发布
白雾茫茫丶
05-27 830
这篇文章介绍了一个基于React+Nest全栈开发的后台系统XmwAdmin。项目包括前端和后端技术栈，线上预览地址和登录信息。作者推荐使用pnpm包管理工具和特定的环境依赖。文章提供了项目的运行和编译代码，以及各个功能模块的介绍。还包括演示图和项目活动以及总结部分。数据库下载链接也提供了，该项目已完成后台的核心功能。
react-router-dom v6路由传参
01-20
在React Router v6中，路由传参可以通过以下几种方式实现： 1. 使用URL参数传递数据： 在路由路径中使用冒号(:)定义参数，然后在组件中通过`useParams`钩子函数获取参数的值。例如： ```jsx import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom'; function User() { const { id } = useParams(); return <h2>User ID: {id}</h2>; } function App() { return ( <Router> <nav> <ul> <li> <Link to="/user/1">User 1</Link> </li> <li> <Link to="/user/2">User 2</Link> </li> </ul> </nav> <Routes> <Route path="/user/:id" element={<User />} /> </Routes> </Router> ); } export default App; ``` 当点击链接时，会根据参数的不同显示不同的用户ID。 2. 使用查询参数传递数据： 在URL中使用查询参数传递数据，可以通过`useLocation`钩子函数获取查询参数的值。例如： ```jsx import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'; function User() { const location = useLocation(); const params = new URLSearchParams(location.search); const name = params.get('name'); return <h2>Hello, {name}</h2>; } function App() { return ( <Router> <nav> <ul> <li> <Link to="/user?name=John">User John</Link> </li> <li> <Link to="/user?name=Jane">User Jane</Link> </li> </ul> </nav> <Routes> <Route path="/user" element={<User />} /> </Routes> </Router> ); } export default App; ``` 当点击链接时，会根据查询参数的不同显示不同的用户名称。 3. 使用状态传递数据： 在React Router v6中，可以使用状态传递数据。通过使用`useNavigate`钩子函数获取导航函数，然后在组件中使用状态来传递数据。例如： ```jsx import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom'; import { useState } from 'react'; function User() { const navigate = useNavigate(); const [name, setName] = useState(''); const handleSubmit = (e) => { e.preventDefault(); navigate(`/user/${name}`); }; return ( <div> <form onSubmit={handleSubmit}> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit">Go</button> </form> </div> ); } function UserDetails() { const { name } = useParams(); return <h2>Hello, {name}</h2>; } function App() { return ( <Router> <nav> <ul> <li> <Link to="/user">User</Link> </li> </ul> </nav> <Routes> <Route path="/user" element={<User />} /> <Route path="/user/:name" element={<UserDetails />} /> </Routes> </Router> ); } export default App; ``` 当在输入框中输入用户名并点击提交按钮时，会根据输入的用户名显示相应的用户详情。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值