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

Redirection

When using the Redirect component, ensure that the redirected routes have matched routers. Otherwise, the corresponding page may not be displayed. Example Error: Path: Redirect: Home

import { Redirect } from 'react-router-dom'
const Index = () = > {
  return (
    <Redirect to="/home">)}Copy the code

router.config.js

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

This jump will render the page invalid, why? /home -> home -> router.js -> router.js -> router.js -> router.js

<Switch>
<Route to="/" component={Index}></Route>
<Route to="/home" component={Home}></Route>
</Switch>
Copy the code

When the Switch component is rendered, it searches for the Route element in the child element, and if the path changes, it will find the first matching route element. /home = /home = /home = /home = /home = /home = /home = /home

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

/home = /home; /home = /home Then it won’t match PI over PI. Put an explicit route in front of it

<Switch>
    <Route path="/">
    <Redirect to="/home/index" />Rootrouter.map ((Route, I) => rootrouter.map ((Route, I) =><Route key={route.path || i} path={ route.path } component={ route.component} ></Route>)}</Route>

</Switch>
Copy the code

This scheme is nested by, let it find the matching route below, display

ErrorBoundary Error interception