Question

我的路线设置如下：

<Route path={'/mycomponent'} exact component={MyComponent} />

并使用ActiveLink组件导航到它：

导入*作为来自'react'的React 从'react-router-dom'

导入{Link}

export interface OwnProps {
  to        : string,
  pathname  : string,
  children  : React.ReactChild
}

const ActiveLink = (props: OwnProps) => {

  const { pathname, to, children } = props

  if (pathname === to) {
    return <span className={ 'active-link active' }>{ children }</span>
  } else {
    return <Link className={ 'active-link in-active' } to={ to ? to : '/' }>{ children }</Link>
  }
}

export default ActiveLink

我想找到一种方法将数据传递给'MyComponent'（最好是在道具中），这相当于'/ MyComponent？aparam = hello＆amp; anotherparam = 32'

Answer 1

假设您说明了以下路线。

<Route path={'/mycomponent'} exact component={MyComponent} />

现在，如果您在路线上重定向，请说

MyComponent?aparam=hello&anotherparam=32

因此，在 MyComponent 类中，您可以获得以下两个参数

let aparam = this.props.match.params.aparam;
let anotherparam = this.props.match.params.anotherparam;

希望这会有所帮助，如果没有，那么请详细说明你的问题Thnaks：）

Answer 2

在路线中定义传递参数是一种很好的做法，就像这样。

<Route path={'/mycomponent/:aparam/:anotherparam'} exact component={MyComponent} />

然后你可以导航到MyComponent并以这种方式传递params：

<Link to="mycomponent/hello/32">{children}</Link>

最后，aparam和另一个参数将通过prop值

在MyComponent中可用

this.props.match.params.aparam;
this.props.match.params.anotherparam;

用参数反应路由器？

2 个答案: