react-route-dom 4+

route creation

Use of         HashRouter and BrowserRouter

        ( The official website recommends BrowserRouter , but this method requires the cooperation of the server , so HashRoute is used )

    The citation is as follows:

    Control description:

       Use a <Switch> component to wrap a set of <Route>s. <Switch> iterates over its own child elements (ie routes) and renders the first element that matches the current path.

        The <Redirect> component is used for route jumping, that is, when a user accesses a route, it will automatically jump to another route. (redirect)

        Property description:

        exact uses exact to only match '/login', like '/login/user' will not be matched, it can be matched without adding.

        path wildcard:

:paramNameMatch a part of the URL until the next /, ?, , are encountered #. ()Indicates that this part of the URL is optional.

 

route jump pass value

    routing:

<Route path="/pcmanage/:identity/:status" component={StatusList}/>

    Jump method:

    

    or

    

    Obtained path:

    /#/pcmanage/supply/1?xx#hash

    The value obtained by props :

    

    The value is obtained as follows:

    this.props.location.state ( pass complex parameters that do not want to appear in the address bar)

    this.props.match.params.xx ( parameters visible in the address bar)

    Note: You need to wrap it with withRouter in the interface you jump to to get the value:

import { withRouter } from 'react-router-dom'

const DrawCircle = withRouter(CircleApp);