Front-endReact

Nested route@5

  1. Secondary route writing method

    (in the @6 version there is no such problem)

    File location: The component folder is created under the first-level routing folder.

    Navigation link location: in the routing component of the first-level routing. The path should be a path with a first-level route, such as <MyNavLink to="/home/news">

    1
    <MyNavLink to="/home/news">News</MyNavLink>

    Registered routing location: same as above. The path should also have a first-level routing path.

    1
    <Route path="/home/news" component={News}/>

    If it is a multi-level routing, the path of each previous level must be written.


  2. Nested route matching mechanism

    The matching order of routes is from the first registration to the last registration, and is matched layer by layer according to the routing registration order. The first-level route must be registered first, because it is registered when the page is opened.


    Matching process: When the navigation link with the path /home/news starts to match, the first level of path="/home" is matched, and the match is successful due to fuzzy matching, so the home component is presented; then It matches the path="/home/news" of the second layer, matches the news component under the home component, and then renders the news component in the home component.


    If strict matching exact is turned on for the first-level route, then the sub-reasons below it are invalid. Because the addresses of sub-routes are all /home/..., and the first-level matching of this address cannot be successfully matched.


Share