使用此标记可以了解有关DOM使用和React Router v4绑定的问题。
this.forceUpdate 并通过 React-Router-DOM Link 组件传递状态
我已经解决了自己的问题，但我不知道发生了什么以及它为什么有效。 我有一个链接组件，它链接到当前所在的同一页面，但针对不同的产品。所以...
React：this.forceUpdate并通过react-router-dom Link组件传递状态
我已经解决了自己的问题，但我不知道发生了什么以及它为什么有效。 我有一个链接组件，它链接到当前所在的同一页面，但针对不同的产品。所以...
React.js 路由问题（react-router-dom）
我部署了静态网站。但是，当我刷新页面时，除了主页之外，它只显示一个空白页面。我已经添加了重定向/重写规则，浏览器返回 200 代码。什么
我正在尝试使用 tsdx（Typescript Packager）为我的一个项目构建react-library-project。 在这个项目中我使用了 反应 反应路由器 DOM scss 和 ant.design 应用程序构建成功...
页面如何检测到用户已离开以访问 SPA 中的另一个页面？ （ReactJs，React Route Dom V6）
我正在做一个流媒体电影网站，所以我想保存用户的观看时长。我面临的问题是我不知道如何检测用户的更改页面以保存信息。 这里是...
请参阅下面我的代码。我目前正在尝试使用同步融合反应甘特图创建甘特图。代码按原样工作正常，但我现在想更改 GanttData 数组中的数据......
未捕获的运行时错误：无法读取 null 的属性（读取“useRef”）
我面临这样的错误，一切正常，编译成功，但应用程序未显示在浏览器上并显示： “未捕获的运行时错误：无法读取 null 的属性（
使用react-router-dom v6在测试文件中出现错误：“类型‘IntrinsicAttributes & RouterProps’上不存在属性‘history’。”
主要文件： 从 'react' 导入 { useContext, useEffect }; 从 'react-router-dom' 导入 { useNavigate, useLocation }; 从 './AuthenticationContext' 导入 AuthenticationContext； 功能
使用React Router 6中的数据路由器我想从操作中重定向用户。但我还需要返回数据。你能同时做这两件事吗？ // 重定向有效，但无法发送数据 出口
假设使用useParams()并访问正确的值（路径）。 useParams返回的值不是已定义的吗？ // URL: /user/:userId，当前URL为/user/100 const { userId } = useParams() // 使用...
假设使用useParams()并访问正确的值（路径）。 useParams返回的值不是未定义的吗？ // URL: /user/:userId，当前URL为/user/100 const {userId} = useParams() // 使用...
react-router 更改路由不会更新产品中的页面（在开发中工作）
在我构建并提供 CRA 项目后，路线更改根本不会更新页面 依赖项： “反应”：“^18.2.0”， "react-router-dom": "^6.12.1&qu...
React Router v.6 usePrompt TypeScript
我基本上是在尝试拦截路线变化。也许 React Router v6 中类似于 vue 的 beforeEach 的东西可能会很有用，因为 React Router v.6 不包含 usePrompt。 每条路线之前
我使用 npm create @quick-start/electron (react js) 创建了一个电子应用程序。 React-router-dom 库正在开发中，但尚未投入生产。 他们说电子不处理...
TypeError: t.useContext(...) is null error in React router Link (React + Webpack)
我有一个react + django + webpack的项目。我在 App.js 上定义了路由 } /> ...
使用react router 6，每次尝试导航时都会出现找不到路由匹配的错误
这是我的 app.js 文件 - 导出默认值 () => { 返回 （ <> {BaseRoutes.map((路线) => ( 这是我的 app.js 文件 - export default () => { return ( <> <Routes> {BaseRoutes.map((route) => ( <Route key={route.path} path={route.path} element={route.element} /> ))} </Routes> <ToastContainer /> </> ); }; 下面是routes.js文件- import React from "react"; import { Routes, Route } from "react-router-dom"; import Container from "./pages/Container"; import Home from "./pages/Home"; import SignInScreen from "./pages/login/signInScreen/SignInScreen"; import EnterOtp from "./pages/login/enterOtp"; import SignUp from "./pages/login/signUpScreen"; import SignUpDetail from "./pages/login/signUpDetail/SignUpDetail"; import CreateNewPassword from "./pages/login/createPassword/CreateNewPassword"; import ForgotPassword from "./pages/login/forgotPassword/ForgotPassword"; import LoginSuccess from "./pages/login/loginSuccess/LoginSuccess"; import Landing from "./pages/Landing"; import DetailsPage from "./pages/DetailsPage/DetailsPage"; import StaticPages from "./components/StaticPages"; import SearchPage from "./components/SearchPage"; import PlayerPage from "./pages/Player/PlayerPage"; import Favourites from "./pages/Favourites"; import SignInOtp from "./pages/login/signInOtp/SignInOtp"; import LivePage from "./pages/Player/LivePage"; import MoreSection from "./pages/MoreSection/MoreSection"; import ViewEpisodes from "./components/ViewEpisodes"; export const NextRoutes = [ { path: "/login", element: <SignInScreen /> }, { path: "/home", element: <Home /> }, { path: "/loginOtp", element: <SignInOtp /> }, { path: "/otp", element: <EnterOtp /> }, { path: "/signup", element: <SignUp /> }, { path: "/createPassword", element: <CreateNewPassword /> }, { path: "/signupdetail", element: <SignUpDetail /> }, { path: "/loginSuccess", element: <LoginSuccess /> }, { path: "/landing", element: <Landing /> }, { path: "/forgot", element: <ForgotPassword /> }, ]; export const BaseRoutes = [ { path: "/", element: <Container /> }, { path: "", element: <Container /> }, ]; 下面是 container.js 文件，其中通过 nextRoutes 进行映射以创建嵌套路由 - import React, { useEffect, useRef, useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { Route, useNavigate, useLocation, Routes, Outlet } from "react-router-dom"; import { bindActionCreators, compose } from "redux"; import { connect } from "react-redux"; import { NextRoutes } from "../../routes"; import "./index.scss"; import Splash from "../Splash"; import Home from "../Home"; import SignInScreen from "../login/signInScreen/SignInScreen"; import Loader from "../../components/Loader/Loader"; import Header from "../../components/Header/Header"; import SideDrawer from "../../components/SideDrawer/SideDrawer"; import Backdrop from "../../components/Backdrop/Backdrop"; import useScrollHandler from "../../helpers/useScrollHandler"; import { deleteKey, getKey } from "../../utils/storage"; import Modal from "../../components/shared/Modal"; import { general, logout_constants } from "../../constants/constants"; import { routeConstants } from "../../constants/routeConstants"; import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import { isAuthenticatedUtil } from "../../utils/authUtils"; const Container = (props) => { const [sideDrawerOpen, setSideDrawerOpen] = useState(false); const [isScrolled, setIsScrolled] = useState(false); const [isAuthenticated, setIsAuthenticated] = useState(false); const menuDataList = useSelector((state) => state?.auth?.menuDataList) || []; const [openModal, setOpenModal] = useState(false); const ref = useRef(); const dispatch = useDispatch(); const history = useNavigate(); const location = useLocation(); const isLoader = useSelector((state) => state?.auth?.isLoader); const signInResponse = useSelector((state) => state?.auth?.signInResponse); useEffect(() => { const isAuth = isAuthenticatedUtil(signInResponse); setIsAuthenticated(isAuth); }, [signInResponse]); useEffect(() => { dispatch(getContentRightInfo()); }, []); const drawerToggleHandler = () => { setSideDrawerOpen(!sideDrawerOpen); }; const backDropClickHandler = () => { setSideDrawerOpen(false); }; const handleScroll = (scrollTop) => { setIsScrolled(scrollTop > 0); }; const closeModal = () => { setOpenModal(false); }; useEffect(() => { // don't use document for selectors use referer which has been already declared if (document) { const ele = document.querySelector(".home-container"); if (ele) { ele.scrollTo(0, 0); } } return () => {}; }, []); const onSignOutClick = () => { if (isAuthenticated) { setOpenModal(true); } else { //history.push(`${routeConstants.LOGIN}`); } }; const onSignOut = () => { closeModal(); logout(); }; const logout = async () => { dispatch(setLoader()); try { await dispatch( logoutUser( getKey("jwt_token"), async (res) => { deleteKey([ "jwt_token", "refresh_token", "subscriber_info", "subscriber_email", "recentSearch", "subscriber_full_info", ]); await dispatch({ type: authConstants.LOGOUT, }); //toast.success(res.message); dispatch(removeLoader()); //history.push(`${routeConstants.LOGIN}`); }, (e) => { toast.error(e.message); dispatch(removeLoader()); } ) ); } catch (error) { console.error("Logout error:", error); dispatch(removeLoader()); } }; // useEffect(() => { // if (menuDataList?.length) { // const isAuth = isAuthenticatedUtil(signInResponse); // setIsAuthenticated(isAuth); // if (isAuth && history.location.pathname == "/") { // handleSkipPassword(); // } // } // }, [menuDataList?.length, history.location.pathname]); useEffect(() => { dispatch(fetchConfigId()); dispatch(fetchMenuDataListByPlatform("IS_WEB")); }, []); const handleSkipPassword = () => { const itemData = menuDataList?.find((ele) => ele.tabName === "Home"); const pageid = itemData?.linkToPage; //history.push(`${routeConstants.CATEGORY}/${pageid}/${itemData?.tabName}`); }; const refer = useScrollHandler(handleScroll); return ( <div className="home-container" ref={refer}> {isLoader ? <Loader /> : null} {!location.pathname.includes(general.VIDEO) && ( <> <Header isAuthenticated={isAuthenticated} drawerClickHandler={drawerToggleHandler} isScrolled={isScrolled} closeModal={closeModal} onSignOutClick={onSignOutClick} /> <SideDrawer listItemClick={backDropClickHandler} show={sideDrawerOpen} isAuthenticated={isAuthenticated} closeModal={closeModal} onSignOutClick={onSignOutClick} /> {sideDrawerOpen && <Backdrop click={backDropClickHandler} />} </> )} <Routes> {NextRoutes.map((route) => { console.log(route,'hgh'); return ( <Route key={route.path} path={route.path} element={route.element} /> ); })} <Route path="/" element={props?.splash?.splash ? <Splash /> : <SignInScreen />} /> </Routes> <Outlet /> {openModal && ( <Modal show={openModal} handleClose={closeModal} buttonLabel={logout_constants.SIGN_OUT} buttonClick={onSignOut} > <p className="modal_text">{logout_constants.SIGN_OUT_TEXT}</p> </Modal> )} {openModal && <Backdrop click={closeModal} />} </div> ); }; const mapStateToProps = (state) => ({ splash: state.splash, isLoader: state.isLoader, }); const mapDispatchToProps = (dispatch) => { return bindActionCreators({}, dispatch); }; export default compose(connect(mapStateToProps, mapDispatchToProps))(Container); 现在，每当我尝试导航（例如 useNavigate('/login')）时，它都会给出未找到路线匹配的错误。这里有什么问题吗？ 任何人都可以在这里建议一些东西吗？ P.S 我是 React js 新手。 app.js 渲染 BaseRoutes 路线，BaseRoutes 在路线路径 Container 上渲染 "/"。然后，Container渲染后代路线，其中包括NextRoutes路线。这些下行路线无法到达，因为仅当路径 完全 匹配 Container 时才会渲染 "/"。 如果您想匹配并渲染后代路由，请将通配符匹配器或 splat、"*" 字符附加到父路径。 export const BaseRoutes = [ { path: "/*", element: <Container /> }, ]; 下面的方法也可以，只是一个渲染 Container 的“包罗万象”的路线。 export const BaseRoutes = [ { path: "*", element: <Container /> }, ];
React router dom 仅在动态路由上重新渲染页面上的组件
我目前正在开发聊天应用程序。 目前在我的 App.tsx 中，我有以下内容。 }> 我目前正在开发聊天应用程序。 目前在我的App.tsx中，我有以下内容。 <Route path="/" element={<RootLayout />}> <Route index element={<Landing />} /> <Route path="auth" element={<Auth />} /> <Route path="chat" element={<Chat />} /> </Route> 在我的 Chat.tsx 中，我有一个 Navbar、Sidebar 和 MainPanel 组件。我如何修改它，以便聊天路由采用 id 参数，并根据聊天的 id，我仅重新渲染 MainPanel 组件来更新聊天（因为 MainPanel 组件是显示对话）而不是重新渲染整个 Chat 组件？ 使用 useParams。 您可以使用useParams()获取id，像这样传递它 <Route path="chat/:id" element={<Chat />} /> import React from "react"; import { BrowserRouter as Router, Routes, Route, useParams, } from "react-router-dom"; const Navbar = () => { return <h1>Navbar</h1>; }; const Sidebar = () => { return <h1>Sidebar</h1>; }; const MainPanel = ({ chatId }) => { return <h1>MainPanel - Current Chat ID: {chatId}</h1>; }; const Chat = () => { const { id } = useParams(); return ( <div> <Navbar /> <Sidebar /> <MainPanel chatId={id} /> </div> ); }; const App = () => { return ( <Router> <Routes> <Route path="/" element={<h1>Home</h1>} /> <Route path="chat/:id" element={<Chat />} /> </Routes> </Router> ); }; export default App; 如果你想玩一下代码。 您可以创建一个 ChatLayout 组件，其中包含您不想重用且不想在 Navbar 中发生更改时重新渲染的所有 Sidebar 、 chat-id 组件。 然后创建一个嵌套路由，例如 <Route path="/" element={<RootLayout />}> <Route index element={<Landing />} /> <Route path="auth" element={<Auth />} /> <Route path="chat" element={<ChatLayout />}> <Route path=":id" element={<MainPanel />}> </Route> </Route> 聊天布局 const ChatLayout = () => { return ( <> <Navbar /> <Sidebar /> <Outlet /> </> ); }; 在 MainPanel 内，您可以使用 useParams() 挂钩来获取 id。 请注意，您应该使用 useNavigate() 钩子或 <Link to="route-to-navigate"> route name</Link> 来完成所有路由和导航 有关上述挂钩和<Outlet/>的更多详细信息，您应该查看您正在使用的版本的react-router文档。他们有不错的入门教程和示例。 如果您想查看代码，我创建了一个示例沙箱这里
从 'react-router-dom' 导入 {BrowserRouter, Router, Route};带来了 15 个错误
./node_modules/react-router-dom/dist/index.js 中的错误 13:0-836 在“react-router”中找不到导出“AbortedDeferredError”（重新导出为“AbortedDeferredError”）（可能导出：Await、Memory...
React Routing - 如何为营销与产品内容使用不同的布局？
我有一个集产品和营销于一体的存储库。我想为每个使用单独的布局。我已经在结构上大致建立了它，但我不明白使用什么来进行逻辑检查
React Router v6：使用 Context API 的加载器函数
我正在使用 React-Router V6，但在实现加载器时遇到问题。我需要通过上下文文件中的函数发出页面请求。然而，路由器是在mai中定义的...