Basic use of react-router

When you work on a project, you find that your knowledge of routing is not enough. It is only a few simple things. You don't know much about routing-related matching caused by page jumps and url resets, so simply say Routing.

Route

Routing is designed to keep our UI and URL s in sync and render pages correctly, with simple API s and powerful features such as code buffer loading, dynamic routing matching, and establishing the correct location transition processing.First, react-router-dom can be installed through npm, react-router-dom depends on react-router, react-router-dom can be installed.
npm install react-router-dom --save
Introduce < BrowserRouter > or < HashRouter > routes into the code, then you can match the current address by comparing the path properties of routes

//Import using ES6 syntax
import { HashRouter, Route } from 'react-router-dom';
ReactDOM.render(
    <HashRouter>
        <Route path='/' component={FirstPage} />
    </HashRouter>
    , 
    app
)

Share a few more used scenarios

Routing Nesting

//Import using ES6 syntax
import { HashRouter, Route, IndexRoute } from 'react-router-dom';
ReactDOM.render(
    <HashRouter>
        <Route path='/' component={FirstPage}>
            <IndexRoute component={Main} />
            <Route path='title' component={FirstPageTitle} />
        </Route>
    </HashRouter>
    , 
    app
)

Using IndexRoute allows FirstPage components to be rendered when a user accesses'/', and its internal components to be rendered. Parent components can render internal routes through this.prop.children. Without IndexRoute, this.props.children inside FirstPage components is undefined

Routing Redirection

//Import using ES6 syntax
import { HashRouter, Route, Redirect } from 'react-router-dom';
ReactDOM.render(
    <HashRouter>
        <Route path='/firstPage' component={FirstPage} />
        <Route path='/secondPage' component={SecondPage} />
        <Redirect to='/firstPage' />
    </HashRouter>
    , 
    app
)

Routing configuration item onEnter, onLeave

Prior to react-router v4, onEnter and onLeave were route hooks, which were triggered when a page was jumped. When a page was jumped, the hooks were triggered in all routes that would leave, starting from the lowest subroute to the end of the outermost parent route, such as when a user jumped from/first Page to/secondPage.OnLeave, then trigger/secondPage onEnter

Access parameters

Without state management or without using browser storage, data can be stored in a url by routing until the browser refreshes to obtain the stored value

//Import using ES6 syntax
import { HashRouter, Route, Redirect } from 'react-router-dom';
ReactDOM.render(
    <HashRouter>
        <Route path='/firstPage' component={FirstPage} />
        <Route path='/secondPage/:count?' component={SecondPage} />
        <Redirect to='/firstPage' />
    </HashRouter>
    , 
    app
)

The SecondPage component can change the current URL by this.props.history.push ({pathname:'/secondPage/${count}'}), store the parameter count in the url, and obtain the parameter in this.props.match.params

withRouter Advanced Components

//Import using ES6 syntax
import { HashRouter, Route, Redirect, withRouter } from 'react-router-dom';
class ShowLocation extends Component {
    render() {
        const location = this.props.location
        return(
            <div>
                pathname is {location.pathname}
                {this.props.children}
            </div>
        )
    }
}
const ShowLocationRouter = withRouter(ShowLocation)
ReactDOM.render(
    <HashRouter>
        <ShowLocationRouter>
            <Route path='/firstPage' component={FirstPage} />
            <Route path='/secondPage/:count?' component={SecondPage} />
            <Redirect to='/firstPage' />
        </ShowLocationRouter>
    </HashRouter>
    , 
    app
)

this.props, location, match must exist by default through the components rendered by route matching, and when other components need to use these routing parameters, they can be wrapped up by the withRouter advanced components to pass in routing parameters.