React-router (11) Routing Configuration _react

11. Routing configuration

DEMO address

Reference 9.routeConfigTable.js

Simply put, there is an object, as follows:

const RouteConfig = [

    {

        path: 'first',

        component: First,

        name: 'First route',

        routes: [

            {

                path: '1',

                component: ChildOne,

                name: '1-1'

            }

        ]

    },

    {

        path: 'second',

        component: Second,

        name: 'Second route'

    }

]

Explanation: component is the component; path is the url corresponding to the component; name is not necessary, here is to save trouble, the description text of the Link tag is generated automatically; routes are optional, and it is the subcomponent routing information of the component. Specifically, this value is passed to the routing subcomponent, and then the subcomponent can use this to generate its own subroutine information;

Just looking at this is more troublesome, let's look at a function first:

const createRouter = (routes, props) => (

    <Router>

        <div>

            {/ * Link tags are automatically generated * /}

            {createLink (routes, props)}

            <hr />

            {/ * Automatically generate Route tags * /}

            {createRoute (routes, props)}

        </ div>

    </ Router>

)

createRouter (RouteConfig, props)

This function does three things: Create a Router label; automatically generate multiple Link labels based on routes (from the routing configuration table above); and multiple Route labels;

Expectedly, for these two tag-generating functions, the Link tags and Route tags generated by them correspond one-to-one;

Then we look at these two generating functions separately, first look at the first one that generates Link tags:

const createLink = (routes, props) => (

    <ol>

        {

            routes.map (route => (

                <li key = {route.path}>

                    <Link to = {`$ {props.match.url} / $ {route.path}`}> {route.name} </ Link>

                </ li>

            ))

        }

    </ ol>

)

Note that the first parameter passed by createLink is an array (refer to the RouteConfig variable above);

Iterate through this array to generate a li tag with a Link tag inside. The to attribute is the current url (props.match.url), followed by the routing path route.path, and the description text is route.name.

Example (map returns an element of an array):

<li key = 'first'>

    <Link to = {`/ first`}> First route </ Link>

</ li>

The final result is that the navigation bar is automatically generated.

Then we look at another function that generates Route tags:

const createRoute = (routes, props) => (

    <React.Fragment>

        {routes.map ((route, i) => {

            let obj = {

                key: i,

                ... route,

                path: `$ {props.match.url} / $ {route.path}`,

                component: props => {

                    let obj = {routes: route.routes, ... props}

                    return <route.component {... obj} />

                }

            }

            return <Route {... obj} />

        })}

    </React.Fragment>

)

After understanding the above, this is naturally easy to understand.

Traverse the routes and take out the component attribute (that is, the component corresponding to the path),

The routing configuration table of the current sub-route is as follows:

routes: [

    {

        path: '1',

        component: ChildOne,

        name: '1-1'

    }

]

Mixed into the routing information (see the obj.component attribute, if you do not understand, please refer to [7] above, the component attribute is a function of the example).

In this way, the corresponding subcomponent can get the routing information of the component in the routing configuration table.

For a specific example, it is the First component. The following data can be retrieved from props:

routes: [

    {

        path: '1',

        component: ChildOne,

        name: '1-1'

    }

]

Therefore, subcomponents can continue to call the above two functions to automatically generate Link tags and Route tags.

Briefly summarize the above process: call the function createRouter and pass the routing configuration table; the createRouter function will call the function that automatically generates Link labels and automatically generates Route labels; the createLink function automatically generates Link labels at the current level according to the routing configuration table; The createRoute function automatically generates the Route label of the current level according to the routing configuration table; createRoute function, if a corresponding component of the routing configuration table has a routes attribute, the value of this attribute is automatically passed to the component, so the component You can get your own, this level of sub-component routing configuration table;