React react-router-dom配置实现路由跳转

谁借莪１个温暖的怀抱￠ 2023-07-11 05:50 114阅读 0赞

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

import * as React from 'react';
    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 AppRouter = () => (
      <Provider store={ store}>
        <HashRouter>
          <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>
        </HashRouter>
      </Provider>
    );

![在这里插入图片描述][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 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200304111818638.png?x-oss-process=image/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 1]: https://img-blog.csdnimg.cn/20200304111845737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M=,size_16,color_FFFFFF,t_70