react-router-dom 相关问题

使用此标记可以了解有关DOM使用和React Router v4绑定的问题。

我已将 BrowserRouter 添加到我的 React 应用程序中 }/> 我已将 BrowserRouter 添加到我的 React 应用程序中 <BrowserRouter> <Routes> <Route path="/" element={<App/>}/> </Routes> </BrowserRouter> 这就是我的应用程序的样子： <div className="App"> <NavBar/> <Home/> <Contact/> </div> 我的组件看起来像这样： <div id="contact" className="Contact"/> 当我尝试使用链接“mySite.com/#contact”直接导航到页面的联系部分时，它不会导航。你能帮我理解哪里出了问题吗？我能够通过使用 React 生命周期和 scrollIntoView 解决我的问题 componentDidMount() { const urlHash = window.location.hash; if (urlHash.length) { const element = document.getElementById(urlHash.substring(1)); if (element) { element.scrollIntoView(); } } } 对于功能组件useState钩子与@grishma的答案配合得很好。 useEffect(() => { const urlHash = window.location.hash; if (urlHash.length) { const element = document.getElementById(urlHash.substring(1)); if (element) { element.scrollIntoView(); } } });

html reactjs react-router-dom

回答 2 投票 0

我正在使用react-router-dom。我可以在react中动态更新路径吗？

我正在尝试通过 api 调用动态更新路径。在路由器路径中。当我单击导航菜单时，第一次它加载完美。但是如果我刷新它会抛出404错误？ <

javascript reactjs path react-router-dom router

回答 1 投票 0

如何使用 mui styled() 将样式应用到 NavLink 元素的活动链接？

我有一个 NavLink 包装组件。我想在该组件激活时为其添加 .active 样式，但我不知道如何使用 styled() 来完成它。如何才能实现这一目标？这是我的...

javascript reactjs material-ui react-router react-router-dom

回答 2 投票 0

为什么 React router v6 useParams 返回的对象的属性可能为“未定义”？

为什么 React router v6 useParams 返回的对象的属性可能为“未定义”？在下面的代码中，我的 IDE 指示 const slug: string |不明确的。 const { slug } = useParams<"slug"&...

typescript react-router-dom

回答 4 投票 0

未捕获错误：注销后重定向到/登录页面时找不到匹配的路由

我正在尝试在我的项目中实现 JWT，一篇文章提供了一个很好的解决方案： https://dev.to/sanjayttg/jwt-authentication-in-react-with-react-router-1d03。 GitHub： https://github.com/sanjay-arya/

reactjs jwt react-router-dom

回答 1 投票 0

React 路由，当点击链接时，会访问正确的 URL，但整个网站是白色的

我正在尝试构建一个看板。我在 localhost/ 有一个板组件，在那里我可以看到所有三列。例如，在第一列的标题中，我有一个链接到本地...

reactjs react-router react-router-dom

回答 1 投票 0

有没有办法在react路由中传递参数而不在url中使用它？

我想创建一个到页面的路由，该页面将根据 id 中存储的内容而变化。但是，我还希望页面 URL 与 id 完全不同。我目前的工作路线：我想创建一个页面的路由，该页面将根据id中存储的内容而变化。但是，我也希望页面 URL 与 id 完全不同。我目前有一个工作路线：<Route path="/schedule/:url" element={<SchedulePage />} />。这正确地将路径设置为“website.com/schedule/”+ url中存储的任何内容。问题是：在我的 SchedulePage 中，我想显示从 id 获取的信息。我能找到的唯一方法是使用参数，但我想将 id 保留在我的网址之外。如何将 id 作为参数传递给路由而不将其包含在 url 中？我尝试将路线更改为<Route path="/schedule/:url/:id?" element={<SchedulePage />} />，希望它不会包含 id，但这根本不起作用。更新：我在 STerliakov 的帮助下找到了解决方案（请参阅下面的评论来阅读我们的对话。）我需要的是 Mongoose 函数findOne()。利用这个，我能够实现我希望实现的目标；创建一个唯一的、用户定义的字符串，其用途与 _id （可用于查找任何一个对象的唯一锚点。）通过使用 Mongoose 函数.findOne，您可以使用唯一值来查找对象。通过将用户选择的字符串设置为类似 url 的内容，您可以使用以下代码： Schedule.findOne({url}); 这有效地生成了类似于 _id 的值，可用于查找特定对象，但是 url 值必须是唯一的。对于我来说这不是问题，因为无论如何我都想使用该值来生成唯一的页面 URL。在过去的两个小时里我学到了很多东西。

reactjs react-router-dom

回答 1 投票 0

React router dom V6 重定向到双路径

我在使用 React Router V6 时遇到问题。我没有将 BrowserRouter 添加到 main.tsx 中。 ReactDOM.createRoot(document.getElementById('root')!).render( ...

reactjs react-router react-router-dom

回答 1 投票 0

反应路由，当我单击链接时，我转到正确的网址，但整个网站是白色的

我是 React 新手，我正在尝试构建一个看板。我有一个 Board 组件 att localhost/ ，在那里我可以看到所有三列。例如，在第一栏的标题中，我有一个 l...

reactjs react-router react-router-dom react-router-component

回答 1 投票 0

转换到 React.lazy 加载组件时闪烁

在此存储库中：https://github.com/tlg-265/react-app-vanilla $ git 克隆 https://github.com/tlg-265/react-app-vanilla $ cd 反应应用程序香草 $ 纱线 $ 纱线开始我有一个只有 3 页的虚拟应用程序：{

reactjs react-router lazy-loading react-router-dom react-dom

回答 3 投票 0

制作自动铣床

您好，我正在制作一个网站，显示来自“https://pokeapi.co/api/v2/pokemon”的神奇宝贝我用 .map() 显示它们。每一张都有我想要制作的图像标题和链接...

javascript reactjs react-router react-router-dom fetch-api

回答 1 投票 0

单击图像应路由到组件

背景我在实施反应路线时遇到问题大家好。请原谅，这是我第一次来这里，我已经在 Codecademy 上发表了一篇关于此的文章。我要继续复制并粘贴...

reactjs npm react-router-dom create-react-app

回答 1 投票 0

<ProtectedRoute /> 不是 <Route> 组件。 <Routes> 的所有子组件都必须是 <Route> 或 <React.Fragment>

所有访问 StackOverflow 的开发人员您好，我在使用受保护的路由时遇到问题，它给出了 [ProtectedRoute] 不是组件的错误。的所有子组件必须是 a 或 <...