React-router-config

React-router-config is a plug-in of react-router to configure static routes and centrally manage route configurations

Write a simple example

Install react-router-dom and react-router-config first

yarn add react-router-dom react-router-config
Copy the code

Create the Router folder, create the index.js file, and write the following code

const Home = () = > {
  return <div>This is the home</div>;
};

const Group = () = > {
  return <div>This is a Group</div>;
};

const About = () = > {
  return <div>This is about</div>;
};

// Write the basic routing route, path is the path, component is the corresponding render component, exact attribute determines the exact match
const routes = [
  {
    path: "/".component: Home,
    exact: true}, {path: "/group".component: Group,
  },
  {
    path: "/about".component: About,
  },
];

// Export the routing table array
export default routes;
Copy the code

Then, export the routing table into the App component, deconstruct the renderRoutes function from the react-router-config, and render the corresponding components of the table using the renderRoutes function

import { NavLink, HashRouter as Router } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import routes from "./router";

function App() {
  return (
    <div style={{ textAlign: "center}} ">
      <Router>
        <NavLink exact activeStyle={{color:'red'}} to="/">home</NavLink> |
        <NavLink activeStyle={{color:'red'}} to="/group">group</NavLink> |
        <NavLink activeStyle={{color:'red'}} to="/about">about</NavLink>
        {renderRoutes(routes)}
      </Router>
    </div>
  );
}

export default App;
Copy the code

usereact-router-configThe most basic route switching effect is complete

Embedded routines by

Normal services must have the use of routes, first add the routes attribute in the routing table, the value is RouteConfig[]

// Add nested routines to the router's index.js file
const GroupDetail = () = > {
  return <div>This is GroupDetail</div>;
};

//
const routes = [
  {
    path: "/".component: Home,
    exact: true}, {path: "/group".component: Group,
    routes: [ // Add nested routines
      {
        path: "/group/detail".component: GroupDetail,
      },
    ],
  },
  {
    path: "/about".component: About,
  },
];
Copy the code

Then change the navigation path to nested path

<NavLink activeStyle={{color:'red'}} to="/group/detail">group</NavLink>
Copy the code

Refresh the page and clickgroupTo view the effect, you will find that the address changed to/group/detail, but the child component content is not rendered renderRoutesWhat exactly does the function do, you can see the source code implementation

By reading the source code, we can seerenderRoutesThe logic is actually to receive routing tablesroutesAfter, determine and initializeextraPropsandswitchProps“And then renderedSwitchComponents,switchPropsAs aSwitchThe component’spropsIncoming,SwitchThe child element of the component passes theroutesSo if I iterate, I get. The logic of traversal is renderingRouteComponent that assigns a set of properties toRouteThe component’sprops.renderThe function renders the concrete component (_extendsThe merge () function merges objects that containextraProps.propsAnd the routing object itself), you can understand why there is no component rendering nested routines, the source code does not deal with nested routines, sorenderRoutesThe function outputs only the first layer of the routing table.

Now that you know the processing logic, it’s easy to render the nested components

Because each component received a routing object that matched its own, you just need to extract routes in route from props and renderRoutes again using renderRoutes. You can print the key/value pair of the specific object

import { renderRoutes } from "react-router-config";

const Group = (props) = > {
  console.log(props)
  return (
    <div>This is Group {renderRoutes (props. The route. Routes)}</div>
  );
};
Copy the code

When you look at the performance of the page, the nested pattern is rendered by the corresponding component