重新學習 react 中編程式的路由

react中編程式的路由

以往知識點都很零散，今天來系統的總結一下react中編程式的路由。目前來看主要有兩種編程式的路由。

1. react-router-redux

   說句實在的，體驗了一番還是react-router-redux香，簡潔明了。以后還是盡量用這個。

   import React from "react";
   import ReactDOM from "react-dom";
   
   import { createStore, combineReducers, applyMiddleware } from "redux";
   import { Provider } from "react-redux";
   
   import createHistory from "history/createBrowserHistory";
   import { Route } from "react-router";
   
   import {
     ConnectedRouter,
     routerReducer,
     routerMiddleware,
     push,
   } from "react-router-redux";
   
   import reducers from "./reducers"; //   導入reducer
   
   // 使用createHistory()創建history對象
   const history = createHistory();
   
   // 創建用語定義和派發導航action的中間件
   const historyMiddleware = routerMiddleware(history);
   
   // 把之前的reducers與react-router-redux提供的routerReducer combine起來，形成一個新的頂級的reducer
   const store = createStore(
     combineReducers({
       ...reducers,
       router: routerReducer,
     }),
     applyMiddleware(historyMiddleware)
   );
   
   // ok，編程導航路由
   store.dispatch(push('/foo'))
   // store.dispatch(push('/bar'))
   // store.dispatch(push('/anywhere-you-want-to-go'))
   
   ReactDOM.render(
       // 使用react-redux提供的provider來提供redux的store
     <Provider store={store}>
         {/* ConnectedRouter 會自動使用store對象 */}
       <ConnectedRouter history={history}>
         <div>
           <Route exact path="/" component={Home} />
           <Route path="/about" component={About} />
           <Route path="/topics" component={Topics} />
         </div>
       </ConnectedRouter>
     </Provider>
   );
   
   

2. connected-react-router

   // 1. reducer.js文件
   
   import { combineReducers } from "redux";
   import { connectRouter } from "connected-react-router";
   
   export default (history) =>
     combineReducers({
       router: connectRouter(history),
       // ... // 其他的reducer
     });
   
   // 2. configureStore.js文件
   
   //...
   import { createBrowserHistory } from "history";
   import { applyMiddleware, compose, createStore } from "redux";
   import { routerMiddleware } from "connected-react-router";
   //從上面的reducer.js里面導入進來
   import createRootReducerCustomCustomCustom from "./reducers";
   // ...
   
   export const history = createBrowserHistory();
   
   export default function configureStore(preloadedState) {
     const store = createStore(
       createRootReducerCustomCustomCustom(history), // root reducer with router state,
       preloadedState,
       compose(
         applyMiddleware(
           routerMiddleware(history) // for dispatching history actions
           // ... other middlewares ...
         )
       )
     );
     return store;
   }
   
   // 3. index.js 文件
   
   // ...
   import { Provider } from "react-redux";
   import { Route, Switch } from "react-router"; // react-router v4/v5
   import { ConnectedRouter } from "connected-react-router";
   import configureStore, { history } from "./configureStore";
   // ...
   
   const store = configureStore(/* provide initial state if any */);
   ReactDOM.render(
     <Provider store={store}>
       <ConnectedRouter history={history}>
         {" "}
         {/* place ConnectedRouter under Provider */}
         <>
           {" "}
           {/* your usual react-router v4/v5 routing */}
           <Switch>
             <Route exact path="/" render={() => <div>Match</div>} />
             <Route render={() => <div>Miss</div>} />
           </Switch>
         </>
       </ConnectedRouter>
     </Provider>,
     document.getElementById("react-root")
   );