设为首页收藏本站

开启辅助访问

如何使用 react

您所在的位置：网站首页 › react-router-dom6 › 如何使用 react

如何使用 react

2023-04-09 07:10| 来源: 网络整理| 查看: 265

如何使用 react-router-dom v6.0.0 和 react-redux 渲染不同的组件日期：2023-02-22 浏览：263 【中文标题】如何使用 react-router-dom v6.0.0 和 react-redux 渲染不同的组件【英文标题】：how to render different components using react-router-dom v6.0.0 with 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( , 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 ( Todo List ); export default App;

SingleTodo 链接不同组件的地方

todos.map((todo) => ( view ))

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

【问题讨论】：

【参考方案1】：

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

function App() return ( Todo List );

到这里

function App() return ( Todo List );

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

【讨论】：

相关文章>

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

{】如何使用react-router-domv6.0.0和react-redux渲染不同的组件【英文标题】：howtorenderdifferentcomponentsusingreact-router-domv6.0.0withreact-redux【发布时间】：2021-05-1420:44:07【问题描述】：我正在尝试通过单击链接来呈现不同的组件，但问题是url...}

React-Router-Dom v6 保护路由

{】React-Router-Domv6保护路由【英文标题】：React-Router-Domv6protectedroutes【发布时间】：2021-11-0321:24:32【问题描述】：我需要有关如何使用react-router-domv6实现受保护路由的帮助。这个例子对我不起作用。我想在访问受保护的路由和未登...}

如何从 react-router-dom v6 中的其他位置/功能获取路由？

{】如何从react-router-domv6中的其他位置/功能获取路由？【英文标题】：Howtogetroutesfromotherlocation/functioninreact-router-domv6?【发布时间】：2022-01-0210:07:12【问题描述】：我正在尝试ReactRouterV06，但遇到了一个问题，我一直在以这种方式...}

React-router-dom (v6) 和 Framer Motion (v4)

{】React-router-dom(v6)和FramerMotion(v4)【英文标题】：React-router-dom(v6)withFramerMotion(v4)【发布时间】：2022-01-1106:52:10【问题描述】：我正在尝试将我的react-router-dom更新到v6，但它似乎会导致帧动画AnimatePresence出现问题，特别是退出过渡...}

在 react-router-dom v6 中使用历史

{】在react-router-domv6中使用历史【英文标题】：usinghistorywithreact-router-domv6【发布时间】：2020-12-0720:00:56【问题描述】：我使用react-router-domversion6而当我使用this.props.history.push(\'/UserDashboard\')时它不起作用。我把它改成consthistory=create...}

react-router-dom v6 TypeScript withRouter用于类组件[重复]

{】react-router-domv6TypeScriptwithRouter用于类组件[重复]【英文标题】：react-router-domv6TypeScriptwithRouterforclasscomponents[duplicate]【发布时间】：2022-01-0704:40:39【问题描述】：我正在尝试在我的TypeScriptReact应用中将react-router-dom更新为v6。在offi...}

在 React Router v6 中，如何在离开页面/路由之前检查表单是不是脏

{...题描述】：以下是我正在使用的包版本。Reactversion-16.13.1react-router-dom}

React Router v6 useNavigate 与 MUI Drawer

{...使用stackblitz尝试在应用程序中使用它之前实现MUIDrawer和react-router-dom。我认为我没有正确使用useNavigate挂钩？任何帮助将不胜感激抽屉.jsconstDrawer=()}

React Router v6 Route 元素无法获取上下文值

{...506:30:30【问题描述】：我现在在我的应用中使用React17.0.2,react-router-dom6.0.2。我尝试使用reactContext和Route在路由上添加身份验证。在App.js我可以从AuthContext中获得价值}

如何使用 react-router-dom 获取当前 URL 的来源？

{】如何使用react-router-dom获取当前URL的来源？【英文标题】：HowtogettheoriginofcurrentURLusingreact-router-dom?【发布时间】：2018-07-1923:15:14【问题描述】：我在带有服务器端渲染的react应用程序中使用react-router-dom，我正在寻找一种方法来...}

【本文地址】

CopyRight 2018-2019 办公设备维修网版权所有豫ICP备15022753号-3