React react-router-dom配置 实现动态路由切换

react-router-dom 实现路由切换，前期已经安装过 react-router-dom。这里增加 store 状态绑定。

// AppRouterLayout.tsx
import * as React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
// eslint-disable-next-line
import { HashRouter, Route, Switch } from 'react-router-dom';
import { Provider } from "react-redux";
import store from "./store";

import App from './App';
import Demo from './views/demo/Demo';
import TodoList from './views/todoList/TodoList';
import ReactRouter from './views/reactRouter/ReactRouter';
import ReactRouterDetail from './views/reactRouter/ReactRouterDetail';

export const AppRouterLayout = () => {
  return (
    <Router>
      <div className="nav-style">
        <div className="nav-left-style">
          <h3>侧边栏导航</h3>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/demo">Demo</Link></li>
            <li><Link to="/todoList">TodoList</Link></li>
            <li><Link to="/reactRouter">React Router</Link></li>
            <li><Link to="/reactRouterDetail/123">React Router Detail</Link></li>
          </ul>
        </div>
        <div className="nav-right-style">
          <h3>内容区</h3>
          <Provider store={store}>
            <Switch>
              <Route exact path="/" component={ App } />
              <Route path="/demo" component={ Demo } />
              <Route path="/todoList" component={ TodoList } />
              <Route path="/reactRouter" component={ ReactRouter } />
              <Route path="/reactRouterDetail/:id" component={ ReactRouterDetail } />
            </Switch>
          </Provider>
        </div>
      </div>
    </Router>
  )
};

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import * as serviceWorker from './serviceWorker';
// import { AppRouter } from './AppRouter';
import { AppRouterLayout } from './AppRouterLayout';

// ReactDOM.render(<AppRouter />, document.getElementById('root'));
ReactDOM.render(<AppRouterLayout />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

/* index.css */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* 侧边栏导航布局 */
.nav-style {
  display: flex;
}
.nav-left-style, .nav-right-style {
  padding: 20px;
}
.nav-left-style {
  width: 220px;
  min-height: 100vh;
  background-color: #CCCCCC;
}
.nav-right-style {
  flex: 1;
}