[JavaScript知识库] react结合react-router-dom和react-router-config配置路由

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react结合react-router-dom和react-router-config配置路由 -> 正文阅读

[JavaScript知识库]react结合react-router-dom和react-router-config配置路由

一、安装依赖

yarn add react-router-dom@5
yarn add react-router-config

注意：这里有个小坑，react-router-dom在v5版本升级到v6版本有一些变换。
(1) Switch 重命名为 Routes
(2) Route 的新特性变更 ,component/render被element替代
所以安装react-router-dom需要安装5版本否则将会出现以下错误：
在这里插入图片描述

二、配置路由

import HYDiscover from "../pages/discover";
import HYFriend from "../pages/friend";
import HYMine from "../pages/mine";

const routes = [
  {
    path: "/",
    exact: true,
    component: HYDiscover,
  },
  {
    path: "/mine",
    component: HYMine,
  }, 
  {
    path: "/friend",
    component: HYFriend,
  },
];
export default routes;

三、使用路由

import React, { memo } from "react";
import { renderRoutes } from "react-router-config";
import { HashRouter } from "react-router-dom";
import routes from "./router";	//配置的路由

const App = memo(() => {
  return (
    <HashRouter>
      {renderRoutes(routes)}
    </HashRouter>
  );
});

export default App;