React Router将参数传递给组件

如果您使用的是类组件，则最有可能使用GSerjo建议。通过<Route>道具将参数传递给目标组件：

exact path="/problem/:problemId" render={props => <ProblemPage {...props.match.params} />}

尝试这个。

<Route exact path="/details/:id" render={(props)=>{return(
    <DetailsPage id={props.match.params.id}/>)
}} />

在详细信息页面中尝试此...

this.props.id

这是 TypeScript版本。工作于"react-router-dom": "^4.3.1"

export const AppRouter: React.StatelessComponent = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/problem/:problemId" render={props => <ProblemPage {...props.match.params} />} />
                <Route path="/" exact component={App} />
            </Switch>
        </BrowserRouter>
    );
};

和组件

export class ProblemPage extends React.Component<ProblemRouteTokens> {

    public render(): JSX.Element {
        return (<div>{this.props.problemId}</div>);
    }
}

哪里 ProblemRouteTokens

导出接口ProblemRouteTokens {issueId：string; }

除了Alexander Lunas的答案以外，如果您想添加多个参数，请使用：

<Route path="/details/:id/:title" component={DetailsPage}/>

export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
        <h3>{this.props.match.params.title}</h3>
      </div>
    )
  }
}

使用渲染方法：

<Route exact path="/details/:id" render={(props)=>{
    <DetailsPage id={props.match.params.id}/>
}} />

并且您应该能够使用以下命令访问ID：

this.props.id

在DetailsPage组件内部

如果要将props传递到路线内的组件，最简单的方法是利用render，如下所示：

<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />

您可以使用以下内容访问道具DetailPage：

this.props.match
this.props.globalStore

将{...props}需要通过原路线的道具，否则你将只能得到this.props.globalStore内DetailPage。

使用组件：

<Route exact path="/details/:id" component={DetailsPage} />

并且您应该能够访问id使用：

this.props.match.params.id

内部DetailsPage组件

我用它来访问组件中的ID：

<Route path="/details/:id" component={DetailsPage}/>

并在详细信息组件中：

export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
      </div>
    )
  }
}

这将在h2中呈现任何ID，希望对您有所帮助。