Learn react routing

React routing = react routing = React routing You can also looK at it

We usually use browserHistory and hashHistory. The difference between these two routing modes will be discussed in a moment, but we will focus on usage for now.import React from "react"; 
// Import routes
import { HashRouter, Route, Link,switch } from "react-router-dom";
// Import components
import Home from './components/Home' 
import Movie from './components/Movie' 
import About from './components/About' 
class App extends React.Component {
render(){return (  
  <HashRouter> 　　
  <div> 
  <h1>Component routing</h1>{/* Routing link component */}<Link to="/home">Home page</Link>   
　　　<Link to="/movie">The movie</Link>  
 　　 <Link to="/about">about</Link>
 　　 <hr></hr>
    <switch>{/* Add a redirected routing rule */}<Route path="/home" component={Home} ></Route>
 　　 <Route path="/movie" component={Movie} ></Route> 
　　　<Route path="/about" component={About} ></Route>
 　　</div> 
   </switch>
  </HashRouter>); }}export default App;
Copy the code

First we need to wrap browserHistory or hashHistory in the outermost layer, and then we use the Link tag, which is the equivalent of the A tag, and then we need to define the route matching rules. We wrap a switch note first, why use this label! The purpose of this tag is to match the Route and do some restrictions, so that you can match exactly what you want, so that there are no surprises. Then you put a Route tag, define path, and then match the Route component, so that the Route matches.

What about the difference between browserHistory and hashHistory! The path of hashHistory will have a #, which is more compatible than browserHistory, because hashHistory matches routes using hash values. It doesn’t care what path follows #, but browserHistory matches your path. It requires server support, and when your server does not do routing configuration, some references are lost when the user refreshes the page, but hashHistory is not.