React Router - 一个完整的React路由库，灵感来自Ember的路由系统
每当用户打开“localhost:3000”时，我必须将用户重定向到“localhost:3000/home/dashboard”
每当用户打开 localhost:3000 时，我都必须将用户重定向到 localhost:3000/home/dashboard。如何让路由器在 React 应用程序中执行此操作？ 我尝试过，但没有得到结果
我在我的 React 项目中使用 React-Router。我有一个如下所示的移动页面： 从“反应”导入反应； 从 'axios' 导入 axios 导出异步函数加载器({ params }) { ...
为什么需要web.config来在IIS中部署react应用程序
我是一个反应初学者。我们创建了一个小型反应应用程序，需要部署在服务器（IIS）上。经过google后，我知道需要将web.config添加到react项目中，这...
我在我的网站上使用 React Router，遇到了以下问题。我的主要应用程序组件定义如下： 导入'./App.css' 从 './Navbar' 导入 { Navbar } 进口 { 出口 } f...
我有一个针对移动用户的 Web 应用程序，但由于我们的客户不需要移动应用程序，因此它是使用 React 开发的。我已经使用 React Router 实现了应用内路由。我用
我有以下场景： 用户打开激活链接；用户完成激活过程后，系统会将其移动到另一个页面。 我不想保留激活状态...
当React Router中的路由命中时，如何有条件地渲染两个组件或更改两个出口？
我有一个 React 应用程序，我在其中使用 React Router。在我的布局组件中，我有这样的结构： 从“反应”导入反应； 从 './components/Header/Header' 导入标头； 导入 Foo...
嵌套路由不会使用 createBrowserRouter 渲染新页面
我无法将我的内容呈现到新页面，而是呈现到与其父页面相同的页面，而不是使用动态 URL 时显示为新页面的预期结果和
React、React Router、Joy UI：如何禁用导航离开和返回后重新出现的小吃栏？
我有一个虚拟的工作板 Web 应用程序，它使用 React 和 Joy UI 作为前端和 UI。我使用 Joy UI 的 Snackbar 组件在用户执行某些操作后临时弹出一条消息（
使用 <Routes> 时，<Route> 的所有子组件都必须是 <Navigate>
我有一个简单的 React 项目，其中包含下一个组件层次结构： 主要组件（这里我调用路由服务并在路由中渲染组件）： const 应用程序：React.FC = () => { 返回 我有一个简单的 React 项目，其中包含下一个组件层次结构： 主要组件（这里我调用路由服务并在路由中渲染组件）： const App: React.FC = () => { return <BaseLayout>{RoutingService.getRoutes()}</BaseLayout>; } export default App; 路由服务代码： class RoutingService { static getRoutes = (): React.ReactNode => { return ( <Routes> <Route key={makeRandomKey()} path={PATHS.ROOT_PATH} element={<MainPage/>}/> <Route key={makeRandomKey()} path={PATHS.AUTH_PATH} element={<LoginPage/>}/> <Route key={makeRandomKey()} path={PATHS.NOT_FOUND_PATH} element={<UnderConstructPage/>}/> <ProtectedRoute path={PATHS.SEARCH_HISTORY_PATH} element={<SearchHistoryPage/>}/> <ProtectedRoute path={PATHS.USER_CABINET_PATH} element={<UserCabinetPage/>}/> </Routes> ); }; } export default RoutingService; 所以我想要执行的操作 - 为所有用户（登录和未登录）打开一些路由（页面），例如主页、未找到页面和身份验证页面。 但我有一些页面需要限制未登录用户的访问。为此，我创建了 ProtectedRoute 组件，当用户未登录并尝试访问需要登录的页面时，该组件应将用户重定向到身份验证页面。 interface ProtectedRouteProps { path: string; element: React.ReactNode; } const ProtectedRoute: React.FC<ProtectedRouteProps> = ({path, element}) => { const isAuthenticated: boolean = useSelector((state: RootState) => !!state.user.userData?.auth?.token); return isAuthenticated ? <Route path={path} element={element}/> : <> <Navigate to="/auth" replace/></> ; }; export default ProtectedRoute; 不幸的是，我收到错误： router.ts:5 Uncaught Error: [ProtectedRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> at invariant (router.ts:5:1) 似乎 <Navigate> 组件中的 ProtectedRoute 会引发此错误，但我不知道如何正确实现此重定向。如何解决这个问题？ intent://m.youtube.com/watch?v=&feature=mweb_c3_open_app_11268432&itc_campaign=mweb_c3_open_app_11268432&redirect_app_store_ios=1&app=desktop#Intent;package=com.google.android.youtube;scheme=vnd.youtube;launchFlags=268435456;end
useLocation 未检测到 MemoryRouter 的位置更改？
我有这个 React 组件，它依赖于 props 和要渲染的查询参数： const 模块 = ({ color = '绿色' }) => { 常量位置 = useLocation() 让名称 = '梨' 常量匹配...
有没有简单的方法返回当前路由器地址。 IE，如果我在页面上，我只想根据反应路由器查看我在哪个页面上。 因此，localhost/admin/users 将返回 admin/...
react-admin 如果在其他组件而不是 app.js 中则无法工作
我正在尝试将 React-Admin AdminDashboard 组件集成到使用 React-Router 进行导航的更大的 React 应用程序中。但是，我遇到了 AdminDashboard 不支持的问题...
有没有办法让侧边栏与右侧内容一起保留，并且在 React Router v6 中仍然具有嵌套路由？
我想要一个侧边栏，右侧有一些卡片。当我单击卡片时，我想导航到名为 Note 的组件，但左侧仍然有侧边栏。 我关注了这个 https://reactrouter.com...
我是一名初学者开发人员，试图创建一个 MERN stack Facebook 克隆，如果用户未登录，他们将被带到带有注册/登录表单的登陆页面。如果用户已登录，...
为什么我的 React 组件没有使用 createBrowserRouter 渲染？
我正在使用 createBrowser 路由来管理路由，但无法渲染组件中的任何数据，为什么？我的 url 重新路由到了看起来正确的位置，但组件中没有显示任何内容，在此
我使用状态来控制页面的渲染 应用程序.tsx 从“react”导入{ useState，useEffect }； 从“@mui/material/styles”导入{ThemeProvider, StyledEngineProvider}； 我...
ReactJS：[Home] 不是 <Route> 组件。 <Routes> 的所有子组件都必须是 <Route> 或 <React.Fragment>
单击“开始测验”按钮时，我尝试导航到“/测验”。 但是，当我编译代码时，我在网站应用程序上收到以下错误：[Home] 不是 单击“开始测验”按钮时，我尝试导航到“/quiz”。 但是，当我编译代码时，我在网站应用程序上收到以下错误：[Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> 我是新来的，如果有人能帮助我，我将不胜感激！ 这是我的 App.js 代码： import { BrowserRouter, Routes, Route } from "react-router-dom"; import Footer from "./components/Footer/Footer"; import Header from "./components/Header/Header"; import Home from "./Pages/Home/Home"; import Quiz from "./Pages/Quiz/Quiz"; import "./App.css"; function App() { return ( <BrowserRouter> <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}> <Header /> <Routes> <Route exact path="/" component={Home} /> <Route path="/quiz" component={Quiz} /> <Home /> </Routes> </div> <Footer /> </BrowserRouter> ); } export default App; 这是我的 Home.js 代码： import { Button } from "@material-ui/core"; import { Container } from "@material-ui/core"; import { useNavigate } from "react-router-dom"; import "./Home.css"; const Home = () => { const navigate = useNavigate(); const sendSubmit = () => { navigate("/quiz"); }; return ( <Container className="content"> <h1 id="quiz-title">Phishing Quiz</h1> <h2 class="question-text"> Do you think you can beat our phishing quiz? </h2> <p className="description"> {" "} There are many social engineering attacks on internet however not all of them are good enough to trick users. However there are some scams that are identical to original websites and usually most of the users get tricked by them. </p> <p className="description"> Do you think you are smart enough to handle these attacks? </p> <p className="description"> We are challenging you with our phishing quiz which will show you examples of really good social engineering attacks on internet. We hope you can pass! </p> <p>""</p> <Button variant="contained" color="primary" size="large" onClick={sendSubmit} > Start Quiz </Button> </Container> ); }; export default Home; 我目前 Quiz.js 中只有空代码。 首先检查你的react router Dom的版本。当你有react-router-dom V6时会出现这个错误。 V6 有很多突破性的改变，所以尝试阅读官方文档 看看这个：https://reacttraining.com/blog/react-router-v6-pre/ 现在回答你的问题部分 React router v6 引入路由 路线介绍 v6 中最令人兴奋的变化之一是 强大的新元素。这是一个相当重大的升级 来自 v5 的元素，具有一些重要的新功能，包括 相对路由和链接、自动路由排名和嵌套 路线和布局。 <BrowserRouter> <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}> <Header /> <Routes> <Route exact path="/" element={<Home/>} /> <Route path="/quiz" element={<Quiz/>} /> </Routes> </div> <Footer /> </BrowserRouter> 另请查看从 v5 到 v6 的迁移指南 https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migration-5-to-6.md#relative-routes-and-links 仅允许 Route 或 React.Fragment 为 Routes 组件的子组件，反之亦然。您已经在“/”路径上渲染了一个 Home 组件，因此请删除无关的 <Home /> 组件。看来您也在使用 react-router-dom v6，因此 Route 组件不再通过 render 或 component 道具渲染组件，它们现在将组件 渲染为 element 道具上的 JSX。 <Routes> <Route exact path="/" component={Home} /> <Route path="/quiz" component={Quiz} /> <Home /> // <-- remove this </Routes> 到 <Routes> <Route path="/" element={<Home />} /> <Route path="/quiz" element={<Quiz />} /> </Routes> 尝试这个语法对我有用 <Routes> <Route path="expenses" element={<Expenses />} /> <Route path="invoices" element={<Invoices />} /> </Routes> 请参阅文档了解更多信息 https://reactrouterdotcom.fly.dev/docs/en/v6/getting-started/tutorial 将这些添加到您的index.js文件中 1. import { BrowserRouter } from "react-router-dom"; 2. <BrowserRouter> <App /> </BrowserRouter> 将这些添加到您的 App.js 文件中 1. import { Routes, Route } from "react-router-dom"; 2. <Routes> <Route path="/" element={<AllMeetups />}> </Route> </Routes> 查看此链接了解更多 https://www.youtube.com/watch?v=OAjzvS_57z0 这是react-router-dom的旧版本代码。并且它不会在 v6 代码中运行。 <Route path="/home"> <Header /> <MyPage/> </Route> 因此，您必须按照以下格式升级您的代码。这意味着您只需将组件放入 element <Route path="/home" element={ <> <Header /> <MyPage /> </> } /> 我希望这个解决方案能够奏效。 谢谢。 两种选择： 选项 1。使用柯里化函数将每个延迟加载的 Route 元素包装在 Suspense 组件中。这避免了在每个 Route 的 element prop 中这样做。 import { Suspense } from "react"; export const Loadable = (Component: any) => (props: any) => { return ( <Suspense fallback={<p>Loading</p>}> <Component {...props} /> </Suspense> ); }; 选项 2：通过数据声明路由，而不是使用 Route 组件。使用自定义函数（本例中为createRoutesWithSuspenseWrappers）生成每条路由，并包裹在 Suspense 中。 const routes = createRoutesWithSuspenseWrappers([ { path: '/', element: <Root /> }, // ... ]); createBrowserRouter(routes);
我有一个使用 React-Router 创建的导航 tsx 导航 从“反应”导入反应 从“./menu”导入{菜单} 从“react-router-dom”导入{链接} 从 './HamburgerMenu.module.scs...
我有一个使用反应路由器创建的导航 tsx 导航 从“反应”导入反应 从“./menu”导入{菜单} 从“react-router-dom”导入{链接} 从 './HamburgerMenu.module.scs...