react-router传递参数到组件

IT技术 reactjs react-router
2021-03-29 02:36:46 
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 吗？

6个回答

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

这是一个更简单、更清晰的答案。但是，有一个限制。除了路由属性对象中已有的属性之外，它不允许您传递任何其他属性。接受的答案确实如此。
2021-06-01 02:36:46
这应该是公认的答案，它更清晰、更简单。
2021-06-18 02:36:46
极好的！我错过了“.params”部分！谢谢！
2021-06-19 02:36:46

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

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

您可以使用以下方法访问propsDetailPage：

this.props.match
this.props.globalStore

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

首先，你的代码是错误的。将组件放置在 Route like<Route exact path="/details/:id" ><DetailsPage /></Route>中与<Route exact path="/details/:id" component={DetailsPage} />. DetailsPage即使您访问了“/”，您的代码也会呈现。第二，当你写的时候<DetailsPage foo={this.props}/>，this提到了null。这就是它不起作用的原因。
2021-06-02 02:36:46
但是为什么它不能按照我在提问中指定的方式工作？
2021-06-05 02:36:46
请打开一个新问题并在那里分享您的代码。
2021-06-10 02:36:46
请参阅下面@Alexander Luna 的回答以获得更简单的解决方案。
2021-06-12 02:36:46
这给出了一个错误 Warning: [react-router] You cannot change <Router routes>; it will be ignored
2021-06-21 02:36:46

从带有钩子的 react-router v5.1 开始：

import { useParams } from 'react-router';

export default function DetailsPage() {
  const { id } = useParams();
}

见https://reacttraining.com/blog/react-router-v5-1/

虽然是最新的，但这仅适用于功能组件。
2021-06-16 02:36:46

使用渲染方法：

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

您应该能够使用以下方法访问 ID：

this.props.id

在 DetailsPage 组件内部

这个顺便说一句也适用于组件方法： <Route path="/..." component={props => <DetailsPage id={props.match.params.id}/>}/>
2021-06-13 02:36:46

除了 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>
    )
  }
}
其它你可能感兴趣的问题
上一篇在 React Native 中获取 ScrollView 的当前滚动位置 下一篇React：父组件重新渲染所有子组件，即使是那些在状态改变时没有改变的子组件