react-router 相关问题

如何监视和测试react-router-dom包的“useNavigate”方法是否被调用

我试图在react-router-dom包的“useNavigate”方法上添加间谍，以测试它是否在导航上被调用。但我收到此错误“TypeError：无法重新定义...

在 NavLink 回调中包装 setState 会给出错误的 setState 警告

我有一个选项卡组件，其中有一堆导航链接。我试图显示一个基于父组件上 NavLink 的 isPending 属性的加载微调器。所以当有

如何在3个组件之间使用路由？

我的应用程序设计为： App.js 包含两个路由： 登陆注册 主页。 主页的布局如下： 标头 侧边栏 内容区 标题和侧边栏组件已导入...

我无法使用react-route-dom渲染我的ProductList

（ <Col xs="9"> <Routes> <Route exact path="/" render={(props) => ( <ProductList {...props} products={this.state.products} addToCart={this.addToCart} currentCategory={this.state.currentCategory} info={productInfo} /> )} /> 这是我的 App.js 文件。这不起作用。 我查看了react-route-dom旧版本，有些地方我们必须将开关替换为路由。但任何改变都没有改变结果。我看不到我的 ProductList 组件。 “react-router-dom”：“6.23.0” 在 React Router DOM 版本 6 中，组件用于定义路由，组件用于渲染特定路由的组件。以下是如何更新 App.js 文件以使用 React Router DOM 版本 6： import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import ProductList from './ProductList'; class App extends React.Component { state = { products: [], currentCategory: '', }; addToCart = (product) => { // Add logic to add product to cart }; render() { return ( <Router> <Routes> <Route exact path="/" element={<ProductList products={this.state.products} addToCart={this.addToCart} currentCategory={this.state.currentCategory} />} /> </Routes> </Router> ); } } export default App;

从链接组件中取消链接特定元素

我正在尝试在组件内添加一个按钮，该按钮已经作为一个整体链接（）。但我希望我的按钮取消链接，但也位于该链接的组件内。 我的意思是当我点击它时

一次又一次地将帖子发送到我的 redux 状态

我正在开发一个具有多个路由的项目，例如 /profile /admin /home 我正在个人资料页面中使用 Redux Toolkit 查询从后端获取帖子并成功获取帖子，但是当我...

一次又一次地将帖子发送到我的 redux 状态。 / Redux 工具包

我正在开发一个具有多个路由的项目，例如 /profile /admin /home 我正在个人资料页面中使用 Redux Toolkit 查询从后端获取帖子并成功获取帖子，但是当我...

isActive NavLink React JavaScript 中背景颜色没有改变

所选列表项的背景颜色没有改变，只是文本颜色变为白色。 从“react-router-dom”导入{NavLink}； 从“r...

react-router-dom 不适用于子目录中的 React 应用程序的嵌套页面和子页面

我正在使用 vite 开发 React 应用程序，并且正在使用最新版本的 React-router-dom v 6.23.0。 我的反应应用程序构建在主目录的子目录（./new-mobile/dist）上。 她...

React Router 组件有功能和无功能的区别

const PATH = BASE + '/' + id; （不适用于以下情况） （不适用于 b...

React useParams 根本不显示参数，返回具有多个值的对象

我正在研究 React 并路由 App.js 中的一些链接，其中 2 个有一个 :id 参数，如下所示 从“反应”导入反应； 导入“./App.css”； 导入 { BrowserRouter as ...

在 redux 的操作中检测到不可序列化的值

在ReactJS项目中，如何解决这个问题？ 在操作的路径：有效负载中检测到不可序列化的值。值：AxiosError {message：'请求失败，状态代码 500'，名称：'

在 Vercel 上部署 React 应用程序时，嵌套路由器不起作用

我在通过 Vercel 部署 React 应用程序时遇到了 React-router 问题。即使它在本地工作正常，它也无法导航到嵌套路由 //应用程序.jsx 我在通过 Vercel 部署 React 应用程序时遇到了 React-router 问题。即使它在本地工作正常，它也无法导航到嵌套路由 //App.jsx <BrowserRouter> <Header></Header> <Routes> <Route path='' element={<Home />}></Route> <Route path='product/:slug' element={<Product />}></Route> <Route path="issue/:slug" element={<Issue />}></Route> <Route path="category/:slug" element={<Category />}></Route> <Route path="login" element={<LoginAdmin />}></Route> <Route path="dashboard" element={<PrivateRoute />}> <Route path="product"> <Route index element={<Navigate to="list" />}></Route> <Route path="create" element={<CreateProduct apiLink={apiLink} />}></Route> <Route path="list" element={<ListProduct />}></Route> <Route path="edit/:ID" element={<EditProduct apiLink={apiLink} />}></Route> </Route> <Route path="category"> <Route index element={<Navigate to="list" />}></Route> <Route path="list" element={<ListCategory />}></Route> <Route path="create" element={<CreateSubCategory apiLink={apiLink} />}></Route> <Route path="edit/:ID" element={<EditCategory apiLink={apiLink} />}></Route> </Route> <Route path="issue"> <Route index element={<Navigate to="list" />}></Route> <Route path="create" element={<CreateIssue apiLink={apiLink} />}></Route> <Route path="list" element={<ListIssue />}></Route> <Route path="edit/:ID" element={<EditIssue apiLink={apiLink} />}></Route> </Route> </Route> <Route path="*" element={<NotFoundPage />}></Route> </Routes> <Footer></Footer> <ContactSocial></ContactSocial> </BrowserRouter> 我还添加了 vercel.json 文件，但我仍然无法访问这些路由 vercel.json { "rewrites": [ { "source": "/(.*)", "destination": "/" } ] } 我希望在 Vercel 上部署这些路由后能够访问这些路由。 嵌套路由也有类似的问题。一切都在本地运行，并且我有相同的 vercel JSON。所有路线都应作为父路线进行渲染。 /places 路线有效。但所有嵌套路由都不是。 这一切都可以在本地开发中运行。 路线示例： <ThemeProvider theme={customTheme}> <Box style={styleLayout} className="sff"> <ConfirmProvider> <Suspense fallback={<Spinner />}> <Routes> <Route path="/places/:id/:place" element={<Map />} /> // THIS ROUTE WORKS (CAUSES A DIALOG TO DISPLAY) <Route path="/" element={<Map />}> // NO ROUTES BELOW THIS RENDER <Route path="signin" element={<Signin />} /> <Route path="events/:eventID/:eventTitle" element={<EventDetails />} /> <Route path="events" element={<Events />} /> <Route path="pages/:pageSlug" element={<Pages />} /> <Route path="pages" element={<Pages />} /> <Route path="admin" element={<AdminLayout />}> <Route index element={<Dashboard />} /> <Route path=':type/' element={<ListContent />} /> <Route path='locations/add' element={<AdminLocations />} /> <Route path='locations/update/:updateId' element={<AdminLocations />} /> <Route path='events/add' element={<AdminEvents />} /> <Route path='events/update/:updateId' element={<AdminEvents />} /> <Route path='pages/add' element={<AdminPages />} /> <Route path='pages/update/:updateId' element={<AdminPages />} /> <Route path='settings/' element={<AdminSettings />} /> </Route> <Route path="*" element={<Navigate to="/" replace />} /> </Route> </Routes> </Suspense> </ConfirmProvider> </Box> <Analytics /> </ThemeProvider>

检查出口是否不存在，在反应路由器6中显示其他内容

我想在React路由器6中当没有插座时显示一个占位符。有什么办法吗？ <> 我想在React路由器6中当没有插座时显示一个占位符。有什么办法吗 <> <Grid item xs={12} sm={2} style={{backgroundColor: '#aaa'}}> <Button onClick={() => this.props.navigate('next')} variant='contained'>next</Button> <Button onClick={() => this.props.navigate(-1)} variant='contained'>back</Button> </Grid> <Outlet/> </> 我认为你可以依靠 useOutlet 钩子来代替。如果结果为空，则渲染您的占位符。详细信息在这里：https://reactrouter.com/en/main/hooks/use-outlet // Placeholder is your own implementation function Page() { const outlet = useOutlet() return <div>{outlet || <PlaceHolder />}</div> } 您可以添加： <Route element = { <div>Please select Chat...</div> } path = '*' /> 我在使用 Remix（基于 React Router）时寻找类似的行为。 索引路线就是为此目的而设计的。您可以在本文档中找到更多详细信息： https://reactrouter.com/en/6.23.0/start/tutorial#index-routes 对于 Remix，添加文件 _index.tsx 以及要显示为占位符的组件可以有效地工作： https://remix.run/docs/en/2.9.1/discussion/routes#conventional-route-configuration 然后<Outlet/>将处理剩下的事情。

提交登录和注册按钮后如何重定向到React中的个人资料页面？

这是我的登录页面代码，我想用它重定向到个人资料页面： 从“react”导入 React, { Component }; 导出默认类登录扩展组件{

更改语言时如何翻译位置URL？

我目前在网站的本地化过程中遇到了障碍。使用 i18next，我们的所有路由都会被翻译，并且默认语言会从 URL 中删除区域设置路径。 换句话说： /

React Router 6 useLoaderData 返回缓存数据

我正在使用一个简单的 vite React.js (v18) 应用程序客户端应用程序和 React Router v6。 在 React router dom 版本 6.22.3 中，我使用 useFetcher 的 fetcher.Form 组件并在更改时调用 fetcher.submit ...

React 输入默认值不会随道具更改而更新

我使用 React、Redux 和 React Router 创建了一个应用程序。当 URL 更改时，应使用查询参数 personId 的值从数组中获取正确的 person 对象：

在 Link 中使用 State 并在另一个页面/jsx 文件上打印时未接收数据或 props

我正在使用 ContactCard 中的状态将我的道具发送到 ContactDetails 页面。但是当使用 useLocation 钩子时，我在 Location.state 中收到 null 。 联系卡.jsx 从“反应”导入反应； 小鬼...

在单个 htm 文件中制作一个简单的路由器

我是新来反应的，我正在尝试制作一个带有两个路由器的页面，如下所示： 我是新来反应的，我正在尝试制作一个带有两个路由器的页面，如下所示： <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/[email protected]/umd/react-router-dom.min.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <div id="root" class="container p-5 m-5 "></div> <script type="text/babel"> function MyForm () { return ( <form> my formmmmmmmmm </form> ); } </script> <script type="text/babel"> function Result() { return (<b>result</b>) ; } </script> <script type="text/babel"> const { Link,BrowserRouter, Routes , Route,} = ReactRouterDOM; function App(){ return ( <div className="row"> <div className="col-6 col-sm-4 bg-white mx-auto"> <div className="row bg-light my-1"> <div className="col-6 border-end"> <Link to="#result"> Result </Link> </div> <div className="col-6"> <Link to="#MyForm"> MyForm </Link> </div> </div> <Routes> <Route path='#MyForm' element={<MyForm/>} /> <Route path='#result' element={<Result/>} /> </Routes> </div> </div> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <BrowserRouter> <App /> </BrowserRouter> ); </script> 但我收到以下错误： React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义 元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义 我搜索了很多，但找不到任何有用的东西。如您所见，元素类型是有效的，因为它是一个函数，所以它也是一个组件。它们都在同一个 html 文件中。 谢谢你 React-Router-DOM v4 不导出 Routes 组件。您可能打算使用 React-Router-DOM v6 来 导出较新的 Routes 组件。 这是截至本文发布时的最新版本。 <script src="https://unpkg.com/[email protected]/dist/umd/react-router-dom.production.min.js" crossorigin></script>