react-router

Use react without using router

react-router

• React -router-dom is used for routing

  npm install react-router-dom --save
  Copy the code

• Model using

  The React mode is slightly different from the React mode. The Vue mode sets whether to use the History mode in the configuration, while the React mode uses the history mode or hash mode by using different components

  • HashRouter: Hash mode
  • BrowserRouter:

  Import {BrowserRouter,HashRouter} from "react-router-dom" import {BrowserRouter,HashRouter} from "react-router-dom" // Wrap HashRouter or BrowserRouter reactdom.render (// Outer package layer Provider, <HashRouter> <Provider store={store}> <App /> </Provider> </HashRouter>, document.getElementById('root') );Copy the code

  // app.js class app extends Component{render() {return <div> <div> <Link to="/"> </Link> </div> <Route exact path="/" Component ={Counter}/> // exact exact path="/about" Component ={About}/> <Route path="/detail" component={detail}/> </div>}} function About() {return <div> <h2> </div>} function Detail() {return <div> <h2>Copy the code

• Routing parameters

  As with the use of vUE routes, parameters are defined in the form of: id

  // Use detail <Route path="/detail/:id" component={detail}></Route> function detail (props) {return <div> < p > Detail: {props. Match. Params. Id} < / p > < h2 > this is our details page < / h2 > < / div >}Copy the code

• Redirect: jump

  <Redirect to="/"> </Redirect> // Redirect to the connectionCopy the code

• dva

  redux + redux-sage + react-redux + react-router-dom = dva

• React-router-dom is used

  install react-router-dom --save
  Copy the code

• Usage patterns

  Different from Vuejs, VUE configures whether to use the History mode, while React uses different components to distinguish between them

  HashRouter