What single page applications? Use of the react-router-dom

That opened a website will only request a html file, no matter how you click to jump, do not refresh the page.

There is a general url address of a label, you click, it will re-request the back of the href address (even if the configuration of Route Route), return to a html file, refresh the page. It would be more cost performance.

<a href="/detail">

Multi-page applications: for example degenerate book, a request to open the Home html, then open a link to the article, first page black and white for a while, again content, which is a multi-page application, and load a html file over.

 

Use of the react-router-dom

Route is to configure routing rules, a rule corresponding to a component when the switch to the corresponding route, the assembly will be mounted out

<BrowserRouter>
     <Route exact path="/" component={Home}></Route>
     <Route path="/detail" component={Detail}></Route>
</BrowserRouter>

Link Router using components with routing rules, routing switches do, so when clicked will not jump directly to a new page, but switched routing path, react will help us load the routing component corresponding to detail, this page switching is very smooth.

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

<Link to="/detail">　　

 Also note Link Router should be placed in the assembly, as the code is not being given because the Home Link is a component, but also in the Home Router components, the component would like to use the Link so, we must be wrapped with Router

　　　　　　<BrowserRouter> 
　　　　　　　　　　// Header assembly on Router, the internal components use because Header Link, but Link Router must be placed in, otherwise an error
                <Header /> 
　　　　　　　　　　// configure routing rules, route also placed in the Router
                <Route exact path="/" component={Home}></Route>
                <Route path="/detail" component={Detail}></Route>
          </BrowserRouter>