react-router-dom路由

react-router-dom路由

1、下载

npm install --save react-router-dom

2、在index.js中导入router

import {HashRouter,Browser} from 'react-router-dom'

使用HashRouter包裹根组件

3、通过NavLink标签进行路由转换

import React from 'react';
import {NavLink,Route,Switch} from 'react-router-dom'
import './App.css';
import Page1 from './pages/a.jsx'
import Page2 from './pages/b.jsx'

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      haha:'哈哈'
    }
  }
  render(){
    return (
      <div className="App">
        <p>
          Edit <code>src/App.js</code> and save to reload.{this.state.haha}
          <Switch>
           <Route path='/pagea' component={Page1}></Route>
           <Route path='/pageb' component={Page2}></Route>
         </Switch>
        </p>
        <NavLink
          activeClassName='deno'
          to='/pagea'
        >a
          </NavLink>
        <NavLink
          activeClassName='deno'
          to='/pageb'
        >b
         </NavLink>
         
    </div>
    )
  } 
}


export default App;

4.路由传值

<NavLink to={/home/${item.mid}}>  </NavLink>
<Route path='/home/:id' component={Home}/>

//在Home组件中接收  
    this.props.match.params.id

5.编程式导航

1. this.props.history.push(‘url’) 带历史纪录跳转
2. this.props.history.replace(‘url’) 不保存历史记录跳转