react-router-dom 相关问题

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

为什么我的 React app.js 用 BrowserRouter 渲染出一个空白页面？

下面的代码是我的app.js。它只是呈现一个空白页面。我的 home.js 或 form.js 没有任何问题 - 问题在于路由。我只是想不通——对此还很陌生。错误信息是

javascript function react-hooks react-router react-router-dom

回答 1 投票 0

从子组件设置反应上下文值

我创建了一个 React Context，如下所示：上下文.ts 文件从“反应”导入{createContext}；常量上下文 = createContext({ 错误： ””，设置错误：() => {}, }); 导出默认

javascript reactjs react-router react-router-dom react-context

回答 1 投票 0

反应受保护的路由问题，路由无法从登录导航到仪表板

我正在构建一个具有基于角色的用户登录的管理应用程序，我在 JWT 令牌中分配了所有角色，并在路由上检查它们以查看用户是管理员、超级管理员还是简单用户。现在

javascript reactjs react-router react-router-dom

回答 1 投票 0

ReactJs | React Router 与 IIS 返回错误“由于发生内部服务器错误，无法显示页面。”

我们正在尝试使用以下 URL 模式路由网站：localhost:8185/variable1/variable2 我们已经使用react-router-dom完成了应用程序内的所有路由。如果我们运行它

reactjs iis react-router-dom http-status-code-500

回答 1 投票 0

我怎样才能回去忽略react-router-dom的seach参数？

现在我有这个=>导航(-1); 这是向后导航按钮的一部分，这是用户单击按钮时触发的函数 const handleClick = async (e: MouseEvent 现在我有这个=>导航(-1); 这是向后导航按钮的一部分，这是用户单击按钮时触发的函数 const handleClick = async (e: MouseEvent<HTMLButtonElement>) => { try { // go back is confirmed navigate(-1); } } catch (err) { // go back is cancelled } } 但情况是：用户可以浏览许多页面，历史记录将如下所示： '/main' => '聊天？page=1' => '聊天？page=2' => '聊天？page=3' 如果用户在第 3 页中单击后退按钮，他将返回到第 2 页，我怎样才能避免所有这些页面并直接从第 3 页转到主页面？我尝试使用 setSearchParams 删除参数，但最终将用户移动到新页面，堆栈变成这样： '/main' => '/chat?page=1' => '/chat?page=2' => '/聊天？page=3' => '/聊天' 使所有更新 page 搜索参数的导航重定向（例如 REPLACE）而不是前进（例如 PUSH）操作。这将以任何后退导航（例如 POP）返回到预期页面的方式维护历史记录堆栈。示例：地点行动类型历史堆栈 "/main" navigate({ pathname: "/chat", search: "?page=1",}); 推 ["/main", "/chat?page=1"] "/chat?page=1" setSearchParams( searchParams => { searchParams.set("page", 2); return searchParams; }, { replace: true },); 更换 ["/main", "/chat?page=2"] "/chat?page=2" setSearchParams( searchParams => { searchParams.set("page", 3); return searchParams; }, { replace: true },); 更换 ["/main", "/chat?page=3"] "/chat?page=3" navigate(-1); 流行 ["/main"]

reactjs react-router react-router-dom

回答 1 投票 0

在我的 React 项目中使用现有代码实现 Router 很困难

我正在尝试使用 Material UI 框架在 React 中实现一个按钮。我看到的每个教程都是这样的，我正在尝试使用 Material UI 框架在 React 中实现一个按钮。我看到的每个教程都是这样的， <div className="App"> <Routes> <Route path='/' element={<Home/>} /> <Route path='/about' element={<About/>} /> <Route path='/contact' element={<Contact/>} /> </Routes> </div> 但是这是我的代码的样子，我不确定在哪里添加路由。我的 Button 组件中现在只有链接，如下所示， export default function TryNowButton() { const navigateTo = useNavigate(); const path = '/Page.tsx' const handleClick = () => { // Navigate to a new page navigateTo(path) }; return ( <Grid container rowSpacing={1} columnSpacing={{ xs: 2 }} direction="row" justifyContent="flex-start" alignItems="center" > <Grid item> <Button onClick={handleClick} variant="contained" color="primary">Try now</Button> </Grid> ... （我正在为我的目标页面使用占位符，只是假装它是正确的路径）。但我不知道将我的路线放在哪里 - 这就是我的 app.tsx 的样子。 const App: React.FC = () => { return ( <div> <Layout> <FullScreenCover title="text" description="text." imageSrc={CoverImageOne} /> 其中 FullScreenCover 是一个包含上述按钮组件的 React 组件。这里的路线怎么走？我尝试添加路由，我希望该按钮能够工作。我将路由添加到应用程序返回语句中的现有 HTML 标签下，但它不起作用，它只是在我打开应用程序时使应用程序屏幕变白。只需导入 import { BrowserRouter, Routes, Route } from "react-router-dom"; 并将 App.tsx 中的所有内容包装在其中，例如： const App: React.FC = () => { return ( <BrowserRouter> <Routes> <Route path='/' element={your element, like a page or something} /> </Routes> </BrowserRouter> 那么当你在代码中时，你会调用： navigateTo(path) 您将在 App.jsx 中的路由内的“元素”内渲染组件

reactjs routes react-router navigation react-router-dom

回答 1 投票 0

反应表单提交在路由更改后不触发重新渲染

我有一个 React 表单组件，在提交后，我进行 API 调用，然后使用 React Router 中的 navigate() 导航到另一个页面。然而，我面临着路线改变的问题...

reactjs async-await react-router react-router-dom

回答 1 投票 0

react router dom 中的 useNavigate 未按预期重定向

我正在使用 ReactJS 来开发我的前端网络。带有路由器的第一页是/route-1 在页面加载后的 useEffect 函数中，它会检查一些内容并需要使用 nav 重定向到 /route-2...

reactjs react-router-dom

回答 2 投票 0

RouterProvide 是否仅在 main.jsx 或 app.jsx 中的应用程序根目录中定义？

我们可以在 src/ 目录之外创建的另一个页面上使用 RouterProvide 作为多页面 React + Vite 项目吗？当我尝试在仪表板/main.jsx 或 app.jsx 上使用 RouterProvide 时，