react-router-dom 相关问题

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

我想使用react-route-dom在react js中创建动态路由。路线将是/property-in-city/，其中“城市”将是动态的

这是我迄今为止创建的路线。 } /> 这是我迄今为止创建的路线。 <BrowserRouter> <Routes> <Route path="/" exact element={<FrontPage />} /> <Route path="/property-in-:cityName/" element={<PropertyListing />} /> <Route path="/property-in-:cityName/:singlePropertySlug" element={<PropertySingle />} /> <Route path="/associates" element={<AssociateListing />} /> <Route path="/about-us" element={<AboutUs />} /> <Route path="/contact-us" element={<ContactUs />} /> <Route path="/*" element={<PageNotFound />} /> </Routes> </BrowserRouter> React Dom 有没有办法实现部分动态路由？其中 /property-in- 将是静态的，而 :city 将是动态的。我尝试了上面的路线方法，但不起作用。当我输入 /property-in-newyork/ 时，它会给出 404，但是当我输入 /property-in-:cityName/ 时，它会加载该组件。当我尝试在 <PropertyListing /> 组件中使用以下方法获取该参数时，它在控制台中给出了未定义的错误。 const { cityName} = useParams(); console.log("City:", cityName); 有什么解决办法或者建议吗？简而言之，不。动态段不能是“部分”的： 🚫"/teams-:teamId" ✅ "/teams/:teamId" 🚫 "/:category--:productId" ✅ "/:productSlug" 希望这能消除您的疑虑

reactjs react-router react-router-dom

回答 1 投票 0

React 表单正在点击 onChange 但现有值没有改变

我正在尝试编辑一些现有数据，为此我需要在输入字段中显示现有值，然后需要更新字段值。但如果我试图删除输入字段的值，...

reactjs react-router-dom react-forms

回答 1 投票 0

如何在 React/typescript 中使用 useNavigate 和 Navigate 在操作后将按钮定向到另一个视图？

我尝试了所有不同的方法，但我无法实现 useNavigate 或 Navigate 通过单击一个按钮将我的“视图”重定向到另一个“视图页面”，该按钮不仅需要重定向，还需要

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

回答 1 投票 0

使用 Vite 的 React 中的路由无法正常工作（构建时）

在我的网站上，我有一些使用 React-Router 制作的路由，它们指向网站本身的几个不同页面。在开发模式下一切正常，但构建版本...

reactjs react-router-dom vite netlify

回答 4 投票 0

路由参数比较未定义（react-router-dom v6）

我用这个绕了一圈。预先感谢您提供的所有帮助。问题在于访问数组中单个项目的视图的方式。 id 参数在广告中传递...

reactjs react-router-dom

回答 1 投票 0

React router dom v6.26.1 更改 url 但不重新渲染组件

点击按钮后，我遇到页面刷新问题，浏览器中的网址发生更改，但页面没有刷新正确的组件，没有浏览器错误，没有终端错误，

reactjs typescript react-router-dom react-router-redux

回答 1 投票 0

如何使用多个插座

我无法获取React中是否可能有“多个嵌套”Outlet和router dom的信息。我使用 createBrowserRouter 创建了一些受保护的路由：常量路由器 =

javascript reactjs react-router-dom outlet

回答 1 投票 0

如何使用多个Outlet（React router dom 6.26.1）

我无法获取React中是否可能有“多个嵌套”Outlet和router dom的信息。我使用 createBrowserRouter 创建了一些受保护的路由：常量路由器 =

reactjs react-router-dom outlet

回答 1 投票 0

React Router v6.10 AuthContext + createBrowserRouter - 导航问题

我正在尝试使用反应路由器创建一个具有受保护路由的应用程序。我使用官方示例（https://github.com/remix-run/react-router/tree/dev/examples/auth）来创建应用程序。

reactjs authentication react-router navigation react-router-dom

回答 1 投票 0

React 和 Jest：无法从 React-router-dom 模拟 Link 功能

我正在尝试从react-router-dom模拟Link对象。我已经成功地模拟了钩子。我的模拟： jest.mock("react-router-dom", () => ({ 使用位置：jest.fn().mockReturnVa...

reactjs unit-testing react-router react-router-dom ts-jest

回答 1 投票 0

使用redux工具包与createApi进行react，但组件需要重新渲染3次，但是当页面加载时，总是需要渲染一次

使用redux工具包与createApi反应，但组件3次重新渲染，使用redux工具包与createApi反应，但组件3次重新渲染，但页面加载时，总是需要重新...

typescript react-hooks react-redux react-router-dom redux-toolkit

回答 1 投票 0

React-router errorElement 未捕获子路由上的错误（来自函数内）

我正在使用React router dom版本6.25.1。我的路由器定义为常量路由器= [ { 元素: , 装载机：我的装载机，错误元素：...

reactjs react-router-dom

回答 1 投票 0

为什么组件没有渲染，但路径却在变化？

我尝试将按钮包装在带有 to="/path" 属性的 Link 标签中，并尝试用 Link 标签替换 Button 标签，但组件仍然无法呈现。这里是我使用的所有反应组件，我不能......

reactjs react-router react-router-dom

回答 1 投票 0

React - 未经身份验证时重定向到登录页面

这是我的主要反应文件： // 应用程序.tsx 常量应用程序：FC = () => { const isLoggedIn: boolean = localStorage.getItem('logged_user') !== null; 返回（这是我的主要反应文件： // App.tsx const App: FC = () => { const isLoggedIn: boolean = localStorage.getItem('logged_user') !== null; return ( <BrowserRouter> <Routes> <Route path="/main" element={isLoggedIn ? <Main/> : <Navigate to='/login'/>}/> <Route path="/about" element={isLoggedIn ? <About/> : <Navigate to='/login'/>}/> <Route path="/login" element={<Login/>}/> </Routes> </BrowserRouter> ); } export default App; 登录后，我将用户存储在本地存储中。我想实现当用户未经身份验证时重定向到/登录页面的行为（当它没有存储在本地存储中时）。一般来说，上述方法是有效的，但只是有时有效。有时，当我转到 '/main' 时，即使我已经登录，我也会被重定向到 '/login'。我认为这是由 React 的重新渲染性质引起的。我该如何解决这个问题？我喜欢这样做的方式是创建一个 <PrivateRoute/> 组件，这样就可以清楚地看出，无论嵌套什么路由都需要经过身份验证的用户。 const PrivateRoute = (props: { children: React.ReactNode }): JSX.Element => { const { children } = props const isLoggedIn: boolean = localStorage.getItem('logged_user') !== null; const location = useLocation() return isLoggedIn ? ( <>{children}</> ) : ( <Navigate replace={true} to="/login" state={{ from: `${location.pathname}${location.search}` }} /> ) } 然后在你的 App.tsx 中 const App: FC = () => ( <BrowserRouter> <Routes> <Route path="/main" element={<PrivateRoute> <Main/> </PrivateRoute>}/> <Route path="/about" element={<PrivateRoute> <About/> </PrivateRoute>}/> <Route path="/login" element={<Login/>}/> </Routes> </BrowserRouter> ) 作为附加功能，传递给 from 组件中的状态的 <PrivateRoute/> 变量允许您在登录后将用户重定向回他们来自的页面。我猜测重定向到“/login”第一次会起作用，您登录，然后尝试导航到“/main”或“/about”并被重定向回“/login”，直到您执行类似的操作页面重新加载并读取任何持久的“logged_user”状态，然后陷入困境，无法注销并重定向回“/login”。您应该将 isLoggedIn 值存储在本地状态中，从 localStorage 初始化，并在应用程序中提供一种切换状态的方法。使用 useEffect 挂钩将本地状态更改保留回 localStorage。示例： const App: FC = () => { const [isLoggedIn, setIsLoggedIn] = useState<boolean>( () => localStorage.getItem('logged_user') !== null ); useEffect(() => { localStorage.setItem('logged_user', JSON.stringify(isLoggedIn)); }, [isLoggedIn]); const logIn = () => setIsLoggedIn(true); // pass this callback to components you want to allow logging out // it will update the local state and then get persisted const logOut = () => setIsLoggedIn(false); return ( <BrowserRouter> <Routes> <Route path="/main" element={isLoggedIn ? <Main/> : <Navigate to='/login'/>}/> <Route path="/about" element={isLoggedIn ? <About/> : <Navigate to='/login'/>}/> <Route path="/login" element={<Login onLogIn={logIn} />}/> </Routes> </BrowserRouter> ); } 这个问题已经回答过一段时间了，但我觉得答案都有点太冗长了。这是使用“catch-all 重定向”进行设置的另一种方法。我根据已接受的答案改编了代码。当您切换 isLoggedIn 的值时，现有路由会发生变化，全能重定向会检测到未知路径并将您送回您选择的页面。 React Fragments 允许您在没有包装器节点的情况下对元素进行分组，这很重要，因为 <Routes> 子级必须都是 <Route> 组件。 const App: FC = () => { const [isLoggedIn, setIsLoggedIn] = useState<boolean>( () => localStorage.getItem('logged_user') !== null ); useEffect(() => { localStorage.setItem('logged_user', JSON.stringify(isLoggedIn)); }, [isLoggedIn]); const logIn = () => setIsLoggedIn(true); // pass this callback to components you want to allow logging out // it will update the local state and then get persisted const logOut = () => setIsLoggedIn(false); return ( <BrowserRouter> <Routes> { isLoggedIn ? <React.Fragment> <Route path="/main" element={<Main/>}/> <Route path="/about" element={<About/>}/> {/* default redirect to main page */} <Route path="*" element={<Navigate to="/main" />} /> <React.Fragment/> : <React.Fragment> <Route path="/login" element={<Login onLogIn={logIn} />}/> {/* default redirect to login page */} <Route path="*" element={<Navigate to="/login" />} /> <React.Fragment/> } </Routes> </BrowserRouter> ); }

javascript reactjs http-redirect react-router react-router-dom

回答 3 投票 0

NextJS 项目的 Vercel 部署（参考错误：文档未定义）

最近我完成了 Next.js 项目，一切都很顺利。在编译过程中，终端给了我一堆错误（我将在下面显示），尽管该项目已经完成......

reactjs next.js react-hooks react-router react-router-dom

回答 1 投票 0

如何在React Router V6中显示404错误页面

我正在使用 React 作为我的 Web 应用程序前端。然而，在开发过程中，我遇到了react-router-dom V6的路由问题。这个问题是我想显示 404 错误页面，如果没有 ro...

javascript reactjs react-router react-router-dom

回答 3 投票 0

React router-dom 无法工作，我需要测试管理日志

我是react.js 的初学者。我有一个问题。当我放置布局组件时，链接和其他根不起作用。我有一个管理页面，我需要测试用户。我怎样才能解决这个问题。而我...