React-Router 学习,从vue转react的角度看

玖柒的小窝

修改于 2021-11-04 09:21:52

1.3K0

修改于 2021-11-04 09:21:52

安装

npm install react-router-dom
复制代码

学习目标

对比vue和react的区别
学习基本使用和layout布局的实现

学习

1. 学习思路

因为之前用过Vue的router，所以在学习react的router的话我会将vue和react之间router进行一个区别，比较。从而更好的入门router。 \

vue的router有什么?

既然要做对比，那么我们得先知道，vue的router有什么？才能更好的对比。

大体思路

vue的路由是在app.vue中使用router-view组件来显示，跳转路由使用api或者router-link组件。

如何实现layout布局

两方面：1. 编写一个router-view父组件,里面需要有router-view组件显示路由页面，可以写其他div编写框架。2. 在router.js中进行一个嵌套路由，父级layout使用该组件

实现:

router-view父组件

<template>
  <div class="viewIndexPage">
    <div>头部</div>
    <router-view />
    <div>底部</div>
  </div>
</template>
复制代码

router.js

[{
    path: '/path',
    name: 'Path',
    component: Fun,//* 刚才编写的父组件页面
    children: [
      {
        path: 'com',
        name: 'Com',
        component: Com,//* 子组件
      }
    ]
  },
]
复制代码

router.js如何引入路由？

const createRouter = () => new Router({
  routes: constantRoutes //* 上面的路由数组 通过该方式引入
})
复制代码

总结: 大概看了一些vue的router实现方式和layout和实现方式，那么接下来我们来看下react如果要实现该怎么操作?

react 实现

刚才实现了vue的router，一共有下面几个方面

router-view如何引入App.js?里面路由数组是引入的?他们之间的区别?
layout的实现方案?子路由页面如何找到父级路由？

router-view如何引入App.js

现在src下面创建router文件夹，再创建/src/router/router.config.js 和 /src/router/index.js 文件 \

router.config.js 用于放置路由数组

import { lazy } from "react"; //* lazy组件用于实现懒加载 只有在用到这个路由再加载
const HomeLayout = lazy(() => import(/* webpackChunkName: "HomeLayout" */"../layout/index"))

export const rootRouter = [ //* 路由数组
    {
        component: HomeLayout,
        path: '/home',
        name: '布局'
    },
]

export const homeRouter = [

]
复制代码

index.js 路由页面

import { Suspense } from 'react';

import { HashRouter as Router, Switch, Route } from 'react-router-dom'
import { rootRouter } from './router.config'

const RouterFun = () => {
    return (
        <Router>
            {/* 使用lazy异步加载组件后，需要配合使用Suspense组件包裹。fallback可以为loading，为异步包裹的内容 */}
            <Suspense fallback={ <div></div> }>
                {/* 需要该组件路由才能显示 */}
                <Switch>
                    {
                        //* 循环路由数组，创建Route属性用于显示 path，显示的路径 component 显示哪个页面
                        rootRouter.map((route,i) => 
                            <Route key={route.path || i} path={ route.path } component={ route.component }></Route>
                        )
                    }
                </Switch>
            </Suspense>
        </Router>
    )
}

export default RouterFun
复制代码

在App.js中引入

App.js

import Router from './router/index' //* 使用路由组件
function App() {
  return (
    <Provider store={store} className="App">
      <Router />
    </Provider>
  );
}

export default App;
复制代码

和vue的区别

引入方式不同，vue是直接在对象中引入路由数组，react则是通过Switch组件，在里面循环Route组件创建

layout的实现方案?子路由页面如何找到父级路由？

先创建几个测试页面 Index.js/User.js

const Index = () => {
    return (<div>
        首页
    </div>);
}

export default Index;
复制代码

在router.config.js中引入重新创建一个router数组

import { lazy } from "react";

export const rootRouter = [
    // {
    //     component: lazy(() => import(/* webpackChunkName: "Index" */"../pages/index")),
    //     path: '/',
    //     name: 'Index'
    // },
    {
        component: lazy(() => import(/* webpackChunkName: "HomeLayout" */"../layout/index")),
        path: '/',
        name: 'Layout'
    },
]

export const homeRouter = [
    {
        component: lazy(() => import(/* webpackChunkName: "Index" */"../pages/home/index")),
        path: '/home/index',
        name: '首页'
    },{
        component: lazy(() => import(/* webpackChunkName: "User" */"../pages/home/user/index")),
        path: '/home/user',
        name: '用户中心'
    },
]
复制代码

创建一个layout文件夹，里面创建一个index.jsx

import { homeRouter } from "../router/router.config";
import { Suspense } from 'react';
import { NavLink, Switch, Route } from "react-router-dom";

const LayoutIndex = () => {
  return (
    <div className="layout-index">
      <Suspense fallback={<div></div>}>
        {homeRouter.map((route) => (
          <NavLink to={route.path}>{route.path} <br/></NavLink>
        ))}
        <Switch>
          {homeRouter.map((route, i) => (
            <Route
              key={route.path || i}
              path={route.path}
              component={route.component}
            ></Route>
          ))}
        </Switch>
      </Suspense>
    </div>
  );
};

export default LayoutIndex;
复制代码

在页面访问即可进入思路