react-router 相关问题

这是我的 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 /> }, ];

reactjs react-router react-router-dom

回答 1 投票 0

从 'react-router-dom' 导入 {BrowserRouter, Router, Route};带来了 15 个错误

./node_modules/react-router-dom/dist/index.js 中的错误 13:0-836 在“react-router”中找不到导出“AbortedDeferredError”（重新导出为“AbortedDeferredError”）（可能导出：Await、Memory...

reactjs react-router react-router-dom

回答 3 投票 0

为什么我的组件没有重定向到电影页面？

我正在使用 React Router v - 6.4。在这里，我尝试使用反应中的 /movies 端点来显示电影组件的反应数据这些是下面提到的代码 // 图书馆导入 React f...

javascript reactjs react-router

回答 1 投票 0

React Router v6：使用 Context API 的加载器函数

我正在使用 React-Router V6，但在实现加载器时遇到问题。我需要通过上下文文件中的函数发出页面请求。然而，路由器是在mai中定义的...

javascript reactjs typescript react-router react-router-dom

回答 1 投票 0

React Router v6 useRouteMatch 等效

使用 React Router v5 时，可以使用 useRouteMatch 获取该路由的路径（模式）。 const { 路径 } = useRouteMatch(); React Router v6 提供了类似的钩子，useMatch；然而...

javascript reactjs react-router react-router-dom

回答 3 投票 0

如何将滑块元素放入react-router-dom的链接组件中？

我有该代码：我有该代码： <Link to="/movie/" key={item.id}> <SwiperSlide className="swiper-slider-card"> <LoadImage path={"https://image.tmdb.org/t/p/w500" + item.poster_path} altImage="backgroundSliderImage" classNames="absolute top-0 left-0 w-full h-full object-contain" /> <div className="absolute bottom-2 left-3"> <p className="text-white text-2xl bg-slate-600 inline-block p-2 rounded-lg text-bold font-quicksand"> {MovieDate} </p> <p className="text-2xl text-white mt-2 bg-slate-700 p-2 rounded-lg drop-shadow-md"> {item.title} </p> </div> </SwiperSlide> </Link> 但是当我单击 swiper 元素时，它不会将我重定向到 "/movie/" 它在 devtools 中也不可见我不知道为什么，也许 swiper 删除了该元素或者不识别。我认为你应该在最外层使用swiper。我给你留下了一个示例代码： <Swiper spaceBetween={50} slidesPerView={3} className="swiper-slider-card"} > <SwiperSlide>Slide 1</SwiperSlide> <SwiperSlide>Slide 2</SwiperSlide> <SwiperSlide>Slide 3</SwiperSlide> <SwiperSlide>Slide 4</SwiperSlide> ... </Swiper> 很可能会拦截并处理 SwiperSlide 组件中的任何单击/鼠标/指针事件，并且不会进一步向上传播 DOM 到链接以实现任何导航操作。将 Link 组件沿着 ReactTree 向下移动，使其成为 SwiperSlide 的子级，并且仍然是您要与之交互的 UI 内容的父级。 <SwiperSlide className="swiper-slider-card" key={item.id}> <Link to="/movie/"> <LoadImage path={"https://image.tmdb.org/t/p/w500" + item.poster_path} altImage="backgroundSliderImage" classNames="absolute top-0 left-0 w-full h-full object-contain" /> <div className="absolute bottom-2 left-3"> <p className="text-white text-2xl bg-slate-600 inline-block p-2 rounded-lg text-bold font-quicksand"> {MovieDate} </p> <p className="text-2xl text-white mt-2 bg-slate-700 p-2 rounded-lg drop-shadow-md"> {item.title} </p> </div> </Link> </SwiperSlide> 请注意，您可能需要将 CSS 应用于 Link 以对其进行视觉样式（或 un-style）。

reactjs react-router swiper.js

回答 2 投票 0

尝试导入错误：“useHistory”未从“react-router-dom”导出

useHistory 给出此错误：无法编译./src/pages/UserForm/_UserForm.js 尝试导入错误：“useHistory”未从“react-router-dom”导出。这构建过程中发生错误...

reactjs react-hooks react-router

回答 14 投票 0

我无法将滑块元素放入react-router-dom的链接组件中

reactjs react-router swiper.js

回答 1 投票 0

使用 JSON React 进行动态渲染路由

所以当我尝试使用 React 路由器设置路由时遇到问题，我遇到错误： [Routes] 不是组件。的所有子组件必须是 a 或我...

reactjs react-router

回答 1 投票 0

react-router 相关问题

最新问题