The installation

npm install react-router-dom
Copy the code

Learning goals

  1. Compare vue and React
  2. Learn basic usage and layout implementation

learning

1. Learn ideas

Since I have used the Router of Vue before, I will compare the router between Vue and React when learning the router of React. Better entry to the router. \

What router does vue have?

What router does vue have? To make a better comparison.

  • General train of thought

Vue routes are displayed in app. Vue using the router-view component. Redirect routes use API or router-link component.

  • How to implement layout

Two aspects: 1. Write a router-view parent component, which needs to have a router-view component to display the routing page, can write other div framework. 2. Create a nested layout in router.js. The parent layout uses this component

Implementation:

  1. The router – view the parent component
<template>
  <div class="viewIndexPage">
    <div>The head</div>
    <router-view />
    <div>At the bottom of the</div>
  </div>
</template>
Copy the code
  1. router.js
[{
    path: '/path'.name: 'Path'.component: Fun,//* The parent component page just written
    children: [{path: 'com'.name: 'Com'.component: Com,/ / * subcomponent}}],]Copy the code
  • How does router.js import routes?
const createRouter = () = > new Router({
  routes: constantRoutes //* The above route array is imported in this way
})
Copy the code

Vue router implementation and layout. React router implementation and layout

The react to realize

The router that we just implemented for vue has several aspects

  1. How is router-view introduced into app.js? Is the route array imported? The difference between them?
  2. Layout implementation scheme? How does the child routing page find the parent route?
  • How is router-view introduced into app.js

Now under the SRC create the router folder, and then create/SRC/router/router config, js and/SRC/router/index/js file

  1. Router.config. js is used to place the routing array
import { lazy } from "react"; //* The lazy component is used to implement lazy loading only when the route is reloaded
const HomeLayout = lazy(() = > import(/* webpackChunkName: "HomeLayout" */".. /layout/index"))

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

]
Copy the 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 loading components asynchronously with lazy, you need to use Suspense component wraps. Fallback can be loading, which is the content of asynchronous wrapping */}<Suspense fallback={ <div></div>}> {/* Requires the component route to display */}<Switch>Rootrouter.map ((Route, I) => rootrouter.map ((Route, I) =><Route key={route.path || i} path={ route.path } component={ route.component} ></Route>)}</Switch>
            </Suspense>
        </Router>)}export default RouterFun
Copy the code
  • Introduced in app.js

App.js

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

export default App;
Copy the code
  • The difference with VUE

React uses the Switch component to create a loop through the Route component

  • Layout implementation scheme? How does the child routing page find the parent route?

Start by creating a few test pages index.js/user.js

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

export default Index;
Copy the code

Re-creating a Router array was introduced 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'}, {component: lazy(() = > import(/* webpackChunkName: "User" */".. /pages/home/user/index")),
        path: '/home/user'.name: 'User center'},]Copy the code

Create a Layout folder and create an 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;
Copy the code

You can enter the idea by visiting the page

Create a new routing array and import it in Layout to create the Router component. Note that React uses a URL to find a layout