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

绝地灬酷狼 2023-07-11 05:50 95阅读 0赞

> 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;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200304112141427.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M=,size_16,color_FFFFFF,t_70