react-router 相关问题

现在我有这个=>导航(-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-native-audio中的url播放音频文件。音频管理器在有时间加载音频文件之前尝试播放音频文件... 我在 git hub 中查找了这个问题，但没有...

reactjs react-native react-redux rxjs react-router

回答 3 投票 0

如何将用户名输入到欢迎页面消息中[重复]

我正在制作一个多页面在线商店网络应用程序，目前我一直专注于如何将用户的输入（用户名）传递到登录后显示的欢迎消息中，例如“weclome

javascript reactjs react-router

回答 1 投票 0

登录React.js后如何将用户名传递到欢迎消息中[重复]

我正在制作一个多页面在线商店网络应用程序，目前我一直专注于如何将用户的输入（用户名）传递到登录后显示的欢迎消息中，例如“weclome

javascript reactjs react-router

回答 1 投票 0

当我的组件正在加载时，如何在 React js 中添加加载微调器？

我用 React js 创建了一个网络应用程序。我每件事都做得很好，网站运行得很好。虽然运行良好，但我需要修改一些东西。就像当我访问我的导航链接时，需要花费很少的时间......

reactjs react-router spinner

回答 3 投票 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 Router v4 / v5 的嵌套路由

我目前正在努力使用 React Router v4 来嵌套路由。最接近的例子是路由配置 React-Router v4 文档。我想将我的应用程序分成两个不同的部分。一个Fr...

javascript reactjs nested react-router react-router-v4

回答 14 投票 0

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

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

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

回答 1 投票 0

导航栏反应路由器与引导程序不工作

我遇到了react-router-bootstrap无法按预期工作的问题，我不明白为什么（它正在另一个项目上工作）当我单击导航栏图标时，URL 会发生变化（“localhost:3000&...