如何使用 react-router-dom v6.0.0 和 react-redux 渲染不同的组件答案

【问题标题】：how to render different components using react-router-dom v6.0.0 with react-redux如何使用 react-router-dom v6.0.0 和 react-redux 渲染不同的组件
【发布时间】：2021-05-14 20:44:07
【问题描述】：

我正在尝试通过单击链接来呈现不同的组件，但问题是 url 更新并且 ui 保持不变，每次我单击不同的项目进行呈现但同样的事情发生时，我尝试了很多来修复它但我找不到解决方案。

从 index.js 作为入口点开始

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import store from "./Components/store";
import { Provider } from "react-redux";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </StrictMode>,
  rootElement
);

然后App.js渲染组件

import "./App.css";
import { Routes, Route } from "react-router-dom";
import { SingleTodoPage } from "./Components/SingleTodoPage";
import { EditTodo } from "./Components/EditTodo";
import { Home } from "./Components/Home";

function App() {
  return (
    <Routes>
      <div>
        <div className="header-text">Todo List</div>
        <div className="box">
          <Route path="/" element={<Home />} />
          <Route path="todo/:todoId" element={<SingleTodoPage />} />
          <Route path="edit/:todoId" element={<EditTodo />} />
        </div>
      </div>
    </Routes>
  );
}

export default App;

SingleTodo 链接不同组件的地方

<SingleTodo />

<List>
        {todos.map((todo) => (
          <ListItem key={todo.id} className={classes.listRoot}>
            <ListItemText primary={todo.name} />
            <ListItemSecondaryAction>
              <CheckBoxIcon color="primary" />
              <DeleteIcon color="secondary" />
              <Link to={`edit/${todo.id}`} className="button">
                <EditIcon />
              </Link>
              <Link to={`todo/${todo.id}`}>view</Link>
            </ListItemSecondaryAction>
          </ListItem>
        ))}
      </List>

codesandbox 了解更多详情，我在 SingleTodo 和 EditTodo 中使用 useParams 挂钩获取动态 url 参数。请如果有人知道如何解决这个问题请帮助我...谢谢

【问题讨论】：

标签： javascript reactjs redux react-redux react-router-dom

【解决方案1】：

将与路由无关的元素移出Routes 组件。

function App() {
  return (
    <Routes>
      <div>
        <div className="header-text">Todo List</div>
        <div className="box">
          <Route path="/" element={<Home />} />
          <Route path="todo/:todoId" element={<SingleTodoPage />} />
          <Route path="edit/:todoId" element={<EditTodo />} />
        </div>
      </div>
    </Routes>
  );
}

到这里

function App() {
  return (
    <div>
      <div className="header-text">Todo List</div>
      <div className="box">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="todo/:todoId" element={<SingleTodoPage />} />
          <Route path="edit/:todoId" element={<EditTodo />} />
        </Routes>
      </div>
    </div>
  );
}

Routes 组件主要用作 react-router-dom v4/5 的 Switch 组件的替代品。

【讨论】：