react的路由Router

import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';
import store from './store';
import Header from './common/header/index';
import { Globalstyle } from './style'
import { Iconfont } from './statics/iconfont/iconfont'


function App() {
  return (
    <Provider store = {store}>
      <div>
        <Globalstyle/>
        <Iconfont />
        <Header />
        <BrowserRouter>
          <div>
            <Route path = '/' exact render ={ () => <div>home</div>}></Route>
            <Route path = '/detail' exact render ={ () => <div>detail</div>}></Route>
          </div>
        </BrowserRouter>
      </div>
        
    </Provider>
  );
}

export default App;

1.安装Router

yarn add react-router-dom

2.在App.js中引用

import { BrowserRouter, Route } from 'react-router-dom';

3.在Provider中写入BrowerRouter组件，每个组件下只能有一个html组件，用div包裹下

4.使用 exact 属性让路由完全匹配