React Router将参数传递给组件

reactjs React.js

老丝阿飞

2020-03-30

const rootEl = document.getElementById('root');

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path="/">
                <MasterPage />
            </Route>
            <Route exact path="/details/:id" >
                <DetailsPage />
            </Route>
        </Switch>
    </BrowserRouter>,
    rootEl
);

我正在尝试访问DetailsPage组件中ID,但无法访问它。我试过了

<DetailsPage foo={this.props}/>

将参数传递给DetailsPage,但徒劳。

export default class DetailsPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="page">
            <Header />
            <div id="mainContentContainer" >

            </div>
            </div>
    );
    }
}

所以有什么想法如何将ID传递给DetailsPage吗?

第3853篇《React Router将参数传递给组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
阿飞 2020.03.30

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

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

尝试这个。

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

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

this.props.id
前端JinJin 2020.03.30

这是 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; }

小宇宙 2020.03.30

除了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>
    )
  }
}
卡卡西 2020.03.30

使用渲染方法:

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

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

this.props.id

在DetailsPage组件内部

2020.03.30

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

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

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

this.props.match
this.props.globalStore

{...props}需要通过原路线的道具,否则你将只能得到this.props.globalStoreDetailPage

NearDavaid 2020.03.30

使用组件:

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

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

this.props.match.params.id

内部DetailsPage组件

Stafan 2020.03.30

我用它来访问组件中的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,希望对您有所帮助。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android