我有一个有以下道具的组件：
interface LocationBoxProps {
location: Location | null
workshift: Workshift
}
接口不能扩展RouteComponentProps，因为它已经有了一个location字段，为了获得更干净的接口，我想创建一个类型为RouteComponentProps的字段。就像这样：
interface LocationBoxProps {
location: Location | null
workshift: Workshift
routeProps: Route
浏览 1提问于2020-10-13得票数 0
我制作了一个组件，并像这样使用它。
<TopNav
loggedIn={global.shared.loggedIn} // false
fullName={global.shared.fullName} // ''
avatar={global.shared.avatarId} // ''
/>
在TopNav组件中，我希望能够访问我传入的属性和props.history或其他无需刷新即可编程导航用户的方式。
import React from 'react';
import { RouteComponen
浏览 1提问于2019-12-31得票数 7
我知道使用react-router-dom道具的方法。就是这样的
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
const AAA : React.FC<RouteComponentProps> = ({history}) => {
.
.
.
}
我知道如何使用由父组件发送的属性，如下所示
import React from 'react';
const AAA = props => {
.
.
浏览 0提问于2020-08-05得票数 0
我尝试了这里描述的方式，，但对我不起作用。我希望能够在用户来自User.js的任何时候访问页码。
User.js
<Link to={{ pathname: "/List", state: { page: '4' }}}> Click Here </Link>
List.js
interface Props {
filter1: string;
filter2: string;
location ?: RouteComponentProps<{ location: string }, {}, { state: stri
浏览 3提问于2021-04-01得票数 1
1回答
在我的React项目中，我的App组件出现了以下错误。 Type '{}' is missing the following properties from type 'Pick<ClassAttributes<App> & RouteChildrenProps<{}, unknown> & { userData: UserDataType | undefined; userRightList: UserRightListType[] | undefined; userPermissionList: string[] |
浏览 614提问于2021-01-16得票数 2
回答已采纳
2回答
我有一些名为project的组件道具，它通过Link传递给这样一个Route (我的项目对象在state扩展属性中)：
<Link
to={{
pathname: path,
state: {
project,
},
}}
key={project.id}
>
<ProjectSummary project={project} deleteCallback={projectDelete}/>
</Link>
因此，它在路由中接收到，并可以传递给链接组件，如下所示：
<Route
path='
浏览 0提问于2021-02-22得票数 3
回答已采纳
我不知所措。我仍然是typescript的新手，我确实尝试了几个我在其他线程上找到的建议的解决方案，比如导入RouteProps或RouteComponentProps并将它们应用于React.FC<RouteProps>，但match、params和id仍然不存在。 我试图创建一些接口，但我不完全确定如何类型对象{}。因为match和params是对象，而id是string.. 下面是我正在使用的代码。任何意见都将非常感谢。 const Cocktail: React.FC = (props) => {
const { cocktail } = useSelector
浏览 456提问于2020-10-24得票数 0
回答已采纳
一切都在开发中正常工作，但是当我进入生产环境时，我得到一个错误：WebpackError: Cannot read property 'pathname' of undefined
但是当I console.log(this.props);时，location: {pathname: "/", ...}会显示为键值对之一。
这是在我的布局index.js中。
代码如下：
import React from 'react';
import Head from 'components/head';
import Header from
浏览 2提问于2018-03-23得票数 2
4回答
我是非常新的反应和TypeScript。我正在Visual 2017中开发一个网页，在这里我有一个搜索组件，我想在我的主组件中使用它。但是，在将搜索导入到我的主组件后，我会得到一个编译时错误，上面写着：
Type {} is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Search> & Readonly<{ children?: ReactNode; }>
Type {} is not assignable to type Readonly&l
浏览 0提问于2018-03-16得票数 10
回答已采纳
我正在尝试学习ReactJS，下面的教程是：
我对编程语言很陌生，所以我现在不知道该做什么。
当我试图添加"Fetchemployee.tsx“文件时，在this.state方法中会出现一个错误。
(TS) 'FetchPeriod‘类型上不存在属性'state’
这是代码：
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { Link, NavLink } from 'react-rout
浏览 0提问于2018-06-28得票数 13
我之所以使用下面的路线，仅仅是因为我在网上找到了代码：
<Route exact path="/test" render={(props) => <Test {...props} msg={ "abc" } /> } />
我知道{...props}表示多个参数，但我完全不明白为什么需要它，因为下面的代码也很好，props.msg在Test中是可用的
<Route exact path="/test" render={() => <Test msg={ "abc" } /> }
浏览 1提问于2020-03-06得票数 3
回答已采纳
我无法连接withRouter和连接。下面是我得到的错误：
(184,27): error TS2345: Argument of type 'ComponentClass<Pick<any, never>> & { WrappedComponent: ComponentType<any>; }' is not assignable to parameter of type 'ComponentType<RouteComponentProps<any>>'.
Type 'Compon
浏览 0提问于2018-01-15得票数 1
2回答
我正在使用React Testing Library。每当我尝试将一个类导入到测试文件中时，它都会给出一个错误，声明： No overload matches this call.
Overload 1 of 2, '(props: Readonly<RouteComponentProps<{}, StaticContext, PoorMansUnknown> & { onSave: (post: { fullName: string; title: string; body: string; createdAt: string; updatedAt:
浏览 83提问于2020-01-29得票数 0
回答已采纳
我还是typeScript的新手，下面是我想做的事情：
我有一个使用History.push导航到另一个功能组件的功能组件，所以我尝试使用的模式如下所示：
history.push({
to: "some URL",
state: {// some state}
})
所以它似乎不起作用，所以这里是我的父组件(我正在尝试导航的组件)。
import React from 'react';
import { VideoDataType } from '../Shared/VideoDataType/VideoDataType';
import {
浏览 11提问于2021-10-02得票数 0
回答已采纳
我试图从url中提取collection，所以我编写了下面的代码
// parent
<Route
path={`${this.props.match.path}/:collection`}
component={Collection}
/>
//child
interface MatchProps {
collection: string;
}
interface OwnProps {
routeProps: RouteComponentProps<MatchProps>;
}
const mapStateToProps = (
state:
浏览 0提问于2020-01-31得票数 0
回答已采纳
我没有使用过React Router v4，所以我可能会犯一些新手错误。我的问题是Typescript编译由于我看到的一个错误而中断，我猜可能有一个类在引擎盖下返回，但我看不到？
代码:：
import * as React from 'react';
import { Router, RouteComponentProps } from 'react-router-dom';
import HomeRoute from './home';
import PhotosRoute from './photos';
import St
浏览 1提问于2017-10-29得票数 10
我的组件CompanyProfile是一个钩子。但我更喜欢用开关和反应路由器。如何获得:name，这是我在uri中通过<Link />发送给在呈现中指定的CompanyProfile组件的一个预期的CompanyProfile支柱？
const App = () => (
<>
<Switch>
<Route
exact
path="/company/:name"
render={(props:RouteComponentProps) => (
浏览 5提问于2020-10-18得票数 0
回答已采纳
我有以下代码，它接收一个历史对象作为支柱：
const ChildComponent = ({ history }) => (
<div className={styles.body}>
<div className={styles.cta}>
<FloatingActionButton onClick={() => history.push(routes[4].path)}>
<span>Click me</span
浏览 1提问于2018-03-17得票数 84
回答已采纳
1回答
使用高阶组件传递属性
、、、
我不知道location对象是如何传递给我的子函数的。它从不手动传入，看起来是自动传入的。
这可能是Reach路由器的增强？
我在用盖茨比。
高阶分量：
const PrivateRoute = ({ component: Component, location, ...rest }) => {
return (
<div>
<h5>{location.pathname}</h5>
<Component {...rest} />
</div>
)
}
使用它的地方：
<L
浏览 0提问于2019-08-28得票数 0
2回答
我需要解构我的一般道具和匹配(从获得一个“id”)。
组件(使用道具)：
interface Props extends RouteComponentProps<{id: string}>{
initialProjectName: string;
workspaceId: string;
}
const AddResources: React.FC<Props> = ({
initialProjectName,
workspaceId,
match,
}) => {
const projectId = match.params.
浏览 1提问于2021-04-22得票数 0
1回答
通用道具类型箭头
、、、
我对下面的语法const MyComponent: FC<RouteComponentProps> = ({history}) => { };的“幕后”感到相当困惑，我看过很多这样的例子，并理解它在传递到MyComponent中的props对象上设置FC<RouteComponentProp>类型。
然而，我感到困惑--我可以用不同的语法获得与props类型相同的逻辑结果吗？我可以写一些像这样的-
const MyComponent = (FC<RouteComponentProps>:{}) => {}。
谢谢你的好意。
浏览 0提问于2020-03-23得票数 0
1回答
我已经创建了一个反应应用程序，一个登录用户可以升级他们的帐户使用Stripe。
我正在使用以下教程来实现Stripe/Express：
stripeBtn.js
axios
.post("http://localhost:9000/payment", body)
.then(response => {
console.log(response);
alert("Payment Success");
})
.catch(error => {
console.
浏览 3提问于2019-11-25得票数 0
回答已采纳
2回答
我正在努力将一个道具从我的路由器传递到我的布局文件，但是这个支柱customClass没有被传递。
这是我的React应用程序的路由器：
const WithMainLayout = ({component: Component, ...more}) => {
return <Route {...more} render={props => {
return (
<MainLayout {...props}>
<Component {...props} />
</MainLayout>
浏览 2提问于2017-07-25得票数 0
回答已采纳
我有一个MainComponent和ChildComponent，把isOpen道具从MainComponent传给ChildComponent。
下面是密码，
function MainComponent () {
return (
<Route
path="items"
render={routeProps => (
<Layout>
<ChildComponent
isOpen={isOpen}// pass
浏览 0提问于2020-05-22得票数 1
回答已采纳
我有过
<Route path='/login' exact render={() => <LoginPage sectionEmailHandler={this.sectionEmailHandler} />} />
这条带有路径/login的路由，我正在传递回调函数
sectionEmailHandler
在我正在做的登录组件中
this.props.history.push('/dashboard/session')
所以现在我收到了一个错误
TypeError:无法读取未定义的属性“push”
但是，当我没有像这
浏览 4提问于2020-11-23得票数 0
7回答
我正在尝试将react路由器与TypeScript一起使用。但是，我在使用withRouter函数时遇到了一些问题。在最后一行，我得到了一个非常奇怪的错误：
Argument of type 'ComponentClass<{}>' is not assignable to parameter of type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'.
Type
浏览 2提问于2017-05-23得票数 61
1回答
我正在使用gasby，这里的主文件总是layout.js，它是它们的父文件。既然它是父文件，那么我如何在其中获得位置道具this.props.location.pathname？
这是我的布局组件
class Layout extends Component {
componentWillMount() {
console.log(this.props, 'dssssssssssssf')
}
render() {
const { children } = this.props
return(
<StaticQuery
浏览 0提问于2019-04-11得票数 2
回答已采纳
我有一个组件，它具有扩展RouteComponentProps的属性，如下所示：
export interface RouteComponentProps<P> {
match: match<P>;
location: H.Location;
history: H.History;
staticContext?: any;
}
现在，当我在应用程序中使用我的组件时，我将这些道具传递给它：
<MyComponent
match={this.props.match}
location={this.props.location}
浏览 0提问于2017-10-25得票数 32
1回答
我有这样的代码：
...
import { match, RouteComponentProps } from "react-router";
import * as H from 'history';
interface oneRoute {
path: string;
exact?: boolean;
main: any;
}
interface ITestProps {
id: string;
}
class Test extends React.Component<RouteComponentProps<
浏览 4提问于2017-10-29得票数 3
我的想法是定义某个无状态组件的location.state可以是什么类型。我找到了一些构建在RouteComponentProps类型上的文章，但我无法弄清楚其中的细节。
假设在本例中，我希望location.state属性的类型为
type StateType = {
id: number,
type: number
}
或者让type`甚至是一个枚举。这能实现吗？
import React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom&#
浏览 5提问于2019-12-03得票数 3
1回答
我正在尝试在我的仪表板中实现一个受保护的路由器。所以我的登陆页面是直接登录页面，如果用户成功登录，我想重定向页面到我的仪表板。这是我的index.js：
ReactDOM.render(
<Router history={hist}>
<Switch>
<Route path="/" component={Login} exact />
<ProtectedRoute path="/admin" component={(props) => <AdminLayout {...
浏览 3提问于2021-06-24得票数 0
回答已采纳
我尝试过理解react/redux，但失败了，并且继承了一些代码(这里分享的是非常简化的版本)。有一个导航器：
class processNavigator extends React.Component<Props, State> {
render() {
switch (this.props.processStatus) {
case processStatus.ended:
return <Page2 />;
case processStatus.notStarted:
return <Pa
浏览 16提问于2021-05-13得票数 0
回答已采纳
2回答
我目前正在将一个大项目切换到TypeScript。我是个新手，还不习惯它。
因此，使用@reach/router，我有以下路由：
import { Router } from '@reach/router'
export default () => (
<main id='container'>
<div>
<Error>
<Router>
<Sign path='sign/*'/>
<Dash
浏览 2提问于2019-12-21得票数 1
changeRoutePath = (e) =>{
e.preventDefault();
this.props.onClose();
this.props.history.push('/company/orgStructure');
};
<Link
to={{
pathname: '/company/orgStructure',
state: {
fromNotifications: true
浏览 0提问于2019-05-30得票数 1
回答已采纳
我正在尝试创建一个受保护的验证路由。如文档中所建议的那样，我有一个ProtectedRoute组件，如下所示：
interface ProtectedRouteProps {
auth: AuthState;
}
const ProtectedRoute = ({
children,
auth,
...rest
}: RouteProps & ProtectedRouteProps): JSX.Element => {
console.log(auth)
return (
<Route
{...rest}
ren
浏览 3提问于2019-10-22得票数 3
回答已采纳
我希望将props与routercomponent props一起传递，并使用react和typescript在组件中访问它。
我有一台有ChildComponent的MainComponent。我想向ChildComponent传递一些道具，即isOpen、showdialog和hidedialog道具。
下面是代码，
function MainComponent() {
render= () => {
return(
<Route
exact
path="/i
浏览 8提问于2020-05-22得票数 0
回答已采纳
如何向无状态组件添加属性？
例如，PrivateRoute是一个无状态组件，用于在用户未经过身份验证时禁止导航到某些路由。可通过路由器访问该路由：
import { BrowserRouter as Router, Link, Route, Redirect } from 'react-router-dom';
...
<Router basename={baseUrl} >
<div>
<ul>
<li><
浏览 0提问于2018-05-18得票数 1
1回答
我对反应中的路由有疑问。问题是，在代码中登录后，我尝试重定向到一条路由。
我读了一些关于反应路由器的文章，试着用它来做，但什么也不做。在堆栈中读取history.push之后，但是它不起作用，也许问题是我需要创建一个组件.js来调用和重定向他，但是我觉得有点不知所措。对这些问题很抱歉。
这就是我创建登录名的地方：
import React, { Component } from 'react';
import './App.css';
import { Card, Button,CardBody,Container, Row, Col, Form, InputG
浏览 0提问于2019-04-17得票数 1
回答已采纳
我们已经购买了一个反应主题，意图使用它的组件在我们的web应用程序，我们结束了一些问题，让他们转过来，我们得到了解决。但是，我们现在遇到了类型问题。
我认为这里的问题是，类型记录不喜欢道具没有定义的类型，并且默认为IntrinsicAttributes。我想不用修改就能使用这些组件。
错误：
(TS) Property 'content' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Card> & Readonly<{ children?:
浏览 0提问于2018-03-15得票数 0
我使用的类型来自@types/react-router-dom版本4.3.1，它从@types/react-router和@types/history导入类型。
在我的应用程序中，我总是有两个位于location状态的属性，并且我希望它们能够自动从RouteComponentProps接口中提取出来，而不必每次都将一个自定义的LocationState类型变量传递给接口。
RouteComponentProps接口的定义在react-router中，其内容如下：
import * as H from 'history';
export interface RouteCompo
浏览 1提问于2019-02-28得票数 23
回答已采纳
当我使用route时，我得到如下错误。 Type: {history: History<PoorMansunknown>; location: Location<PoorMansUnknown>; match:match<any>; staticContext?:staticContext | undefined; onHide() => void} is not assignable to intrinsicattributes and props. 类型Intrinsicattributes和props上不存在属性onHide。 下面是代码片段，
浏览 40提问于2020-07-20得票数 1
回答已采纳
3回答
我是第一次反应，并遇到以下代码，它使用了Router：
<Router>
<NavLink to="/homepage">Homepage</NavLink>
<Route path="/homepage" render={props =>
(<Homepage {...props} pieceOfState={this.state.pieceOfState}/>)
}/>
</Router>
问题是道具是否被传递到render "render={props =&
浏览 2提问于2019-09-19得票数 0
回答已采纳
1回答
我试图延迟加载这样的组件：
const NewPost = React.lazy(() => import('./NewPost/NewPost'));
然后我想把它装载到这样的路线里：
<Route
path="/new-post"
render={() => (
<Suspense fallback={<div>Loading...</div>}>
<NewPost />
</Suspense>
)
浏览 0提问于2018-11-20得票数 0
回答已采纳
4回答
在功能组件中响应URI参数
、、、、
从函数反应组件读取URI参数的正确方法是什么？
在JavaScript中，如果组件是Switch的直接子组件，我们可以这样做：
function MyComponent(props) {
const query = props.location.search;
// ...
}
如果组件不是Switch的直接子组件，我们可以使用一个类：
class MyComponent extends Component<RouteComponentProps> {
render() {
const query = this.props.location.
浏览 0提问于2019-08-01得票数 15
回答已采纳
1回答
我是个打字和反应新手。我正在使用react-router-dom在我的react应用程序中创建路由。我可以直接使用/posts作为硬编码值，但我想尝试相对路径来获取帖子。我已经添加了下面的代码。你能告诉我怎样才能修复PostsPropsType类型吗？ Posts.tsx - import styles from "./Posts.module.css";
import { Link, RouteComponentProps } from "react-router-dom";
export type postType = {
title: strin
浏览 10提问于2020-08-24得票数 0
回答已采纳
我正在尝试测试react-router-dom中封装在withRouter中的React功能组件。组件结构如下所示。 import * as React from 'react';
import { Switch, Route, withRouter, RouteComponentProps } from 'react-router-dom';
export interface Props extends RouteComponentProps {
closeModalLinkPath: string;
closeModalFunction
浏览 47提问于2019-01-17得票数 2
回答已采纳
通过使用React-路由器，我了解到您可以将路由属性向下传递到如下所示的组件：
<Route path="/lyrics/track/:id" render={props => (
<Component {...props} title={"gah"} content={"blabla"} />
</Route>
而且不知怎么的，这会将道具变量的属性(在这里是一个RouteComponentProps )附加到Component的this.props变量中，所以现在在Component中，我可以这样做
浏览 0提问于2018-09-11得票数 0
回答已采纳
我试图在Card类组件中获取URL参数，以便显示它：
import React from "react";
class Card extends React.Component {
state = { user :''}
componentDidMount(){
let user = this.props.match.params.user
this.setState({ user : user})
}
render() {
const { user } = this.s
浏览 6提问于2022-02-17得票数 0
1回答
我有一段我不能理解的代码。任何解释都值得感谢。我的问题是(道具)到底在这里做什么，它来自哪里？如果我去掉"props“，我的代码就不能工作了。 <Route
exact
path='/'
render={(props) =>
!isAuthenticated ? (
<Landing {...props} />
) : (
<Redirect to='/admin
浏览 8提问于2021-07-20得票数 0
回答已采纳
假设我有这样一门课：
class PeopleByTag extends React.Component<RouteComponentProps<{ tag: string }>
在这个示例中，我需要在构造函数中执行一些操作，即获取数据，但要做到这一点，我需要声明一个props参数，但是如果我不指定类型，它将变成任何类型：
constructor(props) {
super(props); // props is any
this.loadData();
}
另一方面，如果我重新声明该类型，代码会变得非常难看：
constructor(props: Read
浏览 1提问于2018-10-14得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
