react中两种配置路由的方法以及通过provide把store带给组件

第一种就是react里比较通用的

首先引入你的store文件，然后通过provide的方式包裹住你的路由列表

组件内通过connect方法去接收

import React,{ Component } from 'react'
import { Provider } from 'react-redux'
import { BrowserRouter, Route } from 'react-router-dom';
import  Home from './page/home'
import Detail from './page/detail'
import Header from './common/header/index'
import Login from './page/login/index'
import store from './store'
class App extends Component {

	render() {
		return (
			<Provider store={ store }>
				<div>
					<BrowserRouter>
						<Header></Header>
						<Route path="/" exact component={ Home }></Route>
						<Route path="/detail" exact component={ Detail }></Route>
						<Route path="/Login" exact component={ Login }></Route>
					</BrowserRouter>
				</div>
			</Provider>
		)
	}	
}

export default App

第二种就是使用route的原生数组对象

首先安装react-router-config

npm install react-router-config --save

或者 yarn add react-router-config

然后创建一个routers.js的文件，在把你的路由列表写上

import  Home from './page/home'
import Detail from './page/detail'
import Login from './page/login/index'

const RouterConfig = [
  {
    path:'/',
    exact: true,
    component: Home,
    indexRoute: { component: Home}
  },
  {
    path:'/detail',
    exact: true,
    component: Detail,
  },
  {
    path:'/Login',
    exact: true,
    component: Login,
  }
]

export default RouterConfig 

最后在index.js中引入 这种方式同样可以将store带入给组件内部

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './App';
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from "react-router-config";
import  RouterConfig   from './router'
import Header from './common/header/index'
import '../statics/iconFont/iconfont.css'
import store from './store'
import  GlobalStyle  from './style.js'
ReactDOM.render(<Provider store = { store}>
  <GlobalStyle />
  <BrowserRouter >
    <Header></Header>
    { renderRoutes(RouterConfig) }
  </BrowserRouter>
</Provider>, document.getElementById('root'));

做个记录，仅供参考