install

npm install react-router-dom
 Copy code

Learning objectives

1. Compare the difference between vue and react
2. Learn the basic usage and implementation of layout layout

study

1. Learning ideas

Because I have used Vue router before, I will make a difference and comparison between Vue and react router when learning react router. So as to better start router\

What does vue's router have?

Since we want to make a comparison, we must first know what is the router of vue? To better compare.

• General idea

Vue routes are displayed in app.vue using the router view component, and jump routes use api or router link components.

• How to implement layout

Two aspects: 1. Write a router view parent component, which needs a router view component to display the routing page, and you can write other div writing frameworks. 2. 2. Perform a nested route in router.js, which is used by the parent layout

realization:

1. Router view parent component

<template>
  <div class="viewIndexPage">
    <div>head</div>
    <router-view />
    <div>bottom</div>
  </div>
</template>
Copy code

1. router.js

[{
    path: '/path',
    name: 'Path',
    component: Fun,//*The parent component page just written
    children: [
      {
        path: 'com',
        name: 'Com',
        component: Com,//*Subcomponents
      }
    ]
  },
]
Copy code

• How does router.js introduce routing?

const createRouter = () => new Router({
  routes: constantRoutes //*The above routing array is introduced in this way
})
Copy code

Summary: I've seen some router implementation methods, layout and implementation methods of vue. Next, let's look at how to operate react if it is to be implemented?

react implementation

The router of vue has been implemented just now. There are the following aspects

1. How does router view introduce App.js? Which routing array is introduced? The difference between them?
2. Implementation scheme of layout? How can the child route page find the parent route?

• How to introduce App.js into router view

Now create the router folder under src, and then create the / src/router/router.config.js and / src/router/index.js files\

1. router.config.js is used to place routing arrays

import { lazy } from "react"; //*Lazy component is used to implement lazy loading. It can only be loaded when this route is used
const HomeLayout = lazy(() => import(/* webpackChunkName: "HomeLayout" */"../layout/index"))

export const rootRouter = [ //*Routing array
    {
        component: HomeLayout,
        path: '/home',
        name: 'layout'
    },
]

export const homeRouter = [

]
Copy code

1. index.js routing page

import { Suspense } from 'react';

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

const RouterFun = () => {
    return (
        <Router>
            {/* After using lazy to load components asynchronously, you need to use the suspend component package. fallback can be loading, which is the content of asynchronous package */}
            <Suspense fallback={ <div></div> }>
                {/* This component is required for routing to be displayed */}
                <Switch>
                    {
                        //*Loop the Route array and create the Route attribute to display the path. Which page does the displayed path component display
                        rootRouter.map((route,i) => 
                            <Route key={route.path || i} path={ route.path } component={ route.component }></Route>
                        )
                    }
                </Switch>
            </Suspense>
        </Router>
    )
}

export default RouterFun
 Copy code

• Introduce in App.js

App.js

import Router from './router/index' //*Using routing components
function App() {
  return (
    <Provider store={store} className="App">
      <Router />
    </Provider>
  );
}

export default App;
Copy code

• And vue

The introduction methods are different. vue directly introduces the Route array into the object, and react is created by looping the Route component through the Switch component

• Implementation scheme of layout? How can the child route page find the parent route?

First create several test pages Index.js/User.js

const Index = () => {
    return (<div>
        home page
    </div>);
}

export default Index;
Copy code

Introduce and recreate a router array in router.config.js

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: 'home page'
    },{
        component: lazy(() => import(/* webpackChunkName: "User" */"../pages/home/user/index")),
        path: '/home/user',
        name: 'User center'
    },
]
Copy code

Create a layout folder and create an index.jsx in it

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;
Copy code

You can access it on the page thinking

Recreate a routing array, introduce it in layout, and create a router component. It is worth noting that react uses the url to find the layout