// store.ts import { RouterState, connectRouter, routerMiddleware, CallHistoryMethodAction } from 'connected-react-router'; import { createBrowserHistory } from 'history'; export const history = createBrowserHistory(); export interface IRootState{ board: IBoardState, score: IScoreState router: RouterState } const rootReducer = combineReducers<IRootState>({ board: boardReducers, score: scoreReducers, router: connectRouter(history) }); type IRootAction = ... | CallHistoryMethodAction; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; let store = createStore<IRootState,IRootAction,{},{}>( rootReducer, composeEnhancers( applyMiddleware(logger), applyMiddleware(routerMiddleware(history)) ) ); export default store; //----------------------------------------- // App.tsx import { ConnectedRouter } from 'connected-react-router'; import { history } from './store'; import { Link } from 'react-router-dom'; /*Other imports are omitted for simplicity reason*/ class App extends React.Component { public render() { return ( <Provider store={store}> <ConnectedRouter history={history}> <div> <nav className="nav-bar"> <Link to="/" className="link">Home</Link> <Link to="/board" className="link">Open Board</Link> <Link to="/scores" className="link">Score Board</Link> <Link to="/about" className="link">About us</Link> </nav> <div> <Switch> <Route path="/" exact={true} component={Home} /> <Route path="/scores" component={Scores} /> <Route path="/board" component={Board} /> <Route path="/about" component={About} /> <Route component={NoMatch} /> </Switch> </div> </div> </ConnectedRouter> </Provider> ); } } export default App
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter