关于react-router-dom路由入门教程

npm install react-router-dom --save

import {BrowserRouter,Route} from 'react-router-dom'//路由跳转
import ReactReduxTest from './ReactReduxTest'
import RouterTest from './RouterTest'
import LoadingRouterTest from './loadingRouterTest'//异步组件用来加载RouterTest这个组件的
import {Provider} from 'react-redux'
import store from './Store/index'
 
const App = (
  //让所有的组件都可以使用store
  //Provider,BrowserRouter下只能有一个div
  //BrowserRouter和Route是路由组件(exact为严格匹配即完全匹配才会跳转)
  <Provider store={store}>
    <div>
      <BrowserRouter>
        <div>
          <Route exact path="/" component={ReactReduxTest}></Route>
          <Route path="/LoadingRouterTest" component={LoadingRouterTest}></Route>
          <Route path="/RouterTest:id" component={RouterTest}></Route>
        </div>
      </BrowserRouter>
    </div>
  </Provider>
)
ReactDOM.render(App, document.getElementById('root'));

import {Link,withRouter} from 'react-router-dom'
 
<Link to={'/' + 2}>回到到详情页</Link>

this.props.history.push({
      pathname : '/routerTest' + JSON.stringify({id: 1,ids: 2}),//要在url上传递多个参数要将参数放到对象中转成json字符串
    })

componentDidMount () {
    console.log(this.props.match.params.id,JSON.parse(this.props.match.params.id),)//接收多个url参数的时候将json字符串转成json对象
  }

//隐式传参 
    this.props.history.push({
      pathname : '/',
      query : { id: 3} 
    })