个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我想延长<Route> react-router-dom 的组成部分|所以它会在 path 之前添加一些值属性(property)。它看起来像这样:
export default function MyRoute({path, ...rest}) {
const newpath = '/app' + path;
return <Route path={newpath} {...rest} />
}
我想像这样使用它:
<MyRoute path="/login" component={Login} />
所以它应该在幕后呈现:
<Route path="/app/login" component={Login} />
当我去 /app/login url 它不加载。 <Login />仍然只出现在 /login 上.
我在这里做错了什么？
编辑
直接在<Switch>里面使用是不行的:
<Switch>
<MyRoute path="/login" />
</Switch>
但在移动到另一个组件时有效:
<Switch>
<Routes />
</Switch>
和路由:
<>
<MyRoute path="/login" />
</>
最佳答案
我最终使用了以下代码:
index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- Below we can set subpage containing React app -->
<script>window.react_app_url = '/my-app-page'</script>
<div id="root"></div>
</body>
</html>
自定义 <MyRoute>应该覆盖所有 path要包含的属性 react_app_url在 index.html 中定义。前任。 <MyRoute path="/home" />应该变成 <Route path="/my-app-page/home" /> .
MyRoute.js
import React from 'react';
export default function MyRoute({path, ...rest}) {
let appUrl = '';
if(window.hasOwnProperty('react_app_url')) {
appUrl = window.react_app_url;
}
if( Array.isArray(path) ) {
const paths = path.map(singlepath=>`${appUrl}${singlepath}`);
path = paths;
} else {
path = appUrl + path;
}
return <Route path={path} {...rest} />;
}
在App.js我们现在可以使用自定义 <Routes>里面<Switch>和所有 paths将被替换为，ex。 /home至 /my-app-page/home .
App.js
import React from 'react';
import {BrowserRouter, Switch} from 'react-router-dom';
import MyRoute from './MyRoute';
export default function App() {
return (
<BrowserRouter>
<Switch>
<>
<MyRoute path="/home" component={Home} />
<MyRoute path="/about" component={About} />
<MyRoute path="/contact" component={Contact} />
</>
</Switch>
</BrowserRouter>
);
}
关于reactjs - <PrivateRoute> 更改后的路径不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65639445/
24
4
0
我想延长 react-router-dom 的组成部分|所以它会在 path 之前添加一些值属性(property)。它看起来像这样: export default function MyRoute(
我有一个看起来像这样的 React Route...它根据 URL 参数的值有条件地呈现一个组件: : Post does not exist ); } 我只希望经过身份验证
我的 app.js 中有这段代码，并配置了一个 PrivateRoute，它要求用户登录，并且只有在设置了 cookie 时才允许访问。但是，我想限制用户在成功登录后尝试点击 /login 。我使用了
我正在尝试在我的单页应用程序中创建一个简单的身份验证系统。我想为访客禁用除 /login 之外的所有路由。了解用户是否通过身份验证或访客的方法是了解 localStorage 中是否有 access_
我是 React 新手。我现在正在研究react router，看到很多人使用PrivateRoute组件来处理用户身份验证页面。但是，我对这个函数的语法和理解感到非常困惑。 export funct
我是 ReactJS 的新手，并开始使用 React 开发我的第一个应用程序。我一直在观看视频并浏览各种教程，并最终成功地使用 Login 构建了我的第一个 ReactRedux 应用程序。 我用过
我正在学习在 Typescript 中使用 React Router。我也在阅读这篇关于如何在 typescript+react 路由器中实现 PrivateRoutes 的文章。 https://t
我见过很多关于人们如何使用 react-router-dom 创建私有(private)路由的用例。它通常看起来像这样: const PrivateRoute = ({component: Compo
https://reacttraining.com/react-router/web/example/auth-workflow 我在 react-router-dom 文档中实现 Private-R
我正在使用 React-Router V4，我想移交“经过身份验证”的属性来决定是将用户发送到登录页面还是请求的页面: PrivateRoute.js import React from "react
我尝试创建一个 PrivateRoute使用react-router-dom like this example我有一个这样的错误: Attempted import error: 'PrivateR
这是一个来自 react-router 的例子，说明如何为 protected 路由添加一个组件: function PrivateRoute({ component: Component, ...r
我试图在我的应用程序中实现一些安全性，并最终创建了以下代码: import React from 'react'; import { Route, Redirect } from 'react-rou
在我的 react.js 项目中集成 PrivateRoute HOC 时，我完全卡住了。 这是我的路线文件 import React, { Component } from "react"; imp
示例 https://reacttraining.com/react-router/web/example/auth-workflow 中提供了 PrivateRoute连接 Redux 后不工作。
我正在使用 React Router v6 并为我的应用程序创建私有(private)路由。 在文件 PrivateRoute.js 中，我有代码 import React from 'react';
我是一名优秀的程序员,十分优秀！