Question

我有一个带链接的导航栏

render() {
    return (
      <Link to={"/test/1"} >Task 1 </Link>
      <Link to={"/test/2"} >Task 2 </Link>
      <Link to={"/test/3"} >Task 3 </Link>
      <Link to={"/test/4"} >Task 4 </Link>
    )
}

我设置路线以使用动态id调用相应的组件，以根据id

显示内容

我所谓的测试组件具有以下代码

render() {
    return (            
        <div>
            <div>
                {this.props.id}
            </div>
        </div> 
    );
}

我需要根据路径中传递的id更改我的组件中的内容而不刷新。但是{this.props.id}没有填充那里的值。我该如何解决这个问题？

Answer 1

使用React路由器时，您将拥有一个名为match的对象，其中包含各种其他属性。其中一个是params，它包含您通过路径的所有参数。

访问路线及其参数应使用props.match.params.id（假设您已将路线配置为<Route path="/test/:id" component={YourComponent} />

Answer 2

尝试类似的东西：

const Parent = () => (
    <div>
        <Link to="/test/1">Task 1</Link>
        <Link to="/test/2">Task 2</Link>
        <Link to="/test/3">Task 3</Link>
        <Link to="/test/4">Task 4</Link>

        <Route path="/test/:id" component={Child} />
    </div>
)

const Child = (props) => (
    <div>
        <h3>ID: {props.match.params.id}</h3>
    </div>
);

Answer 3

您可以使用查询字符串将ID传递给组件

render() {
    return (
      <Link to={`/test/1?id=${id1}`} >Task 1 </Link>
      <Link to={`/test/2?id=${id2}`} >Task 2 </Link>
      <Link to={`/test/3?id=${id3}`} >Task 3 </Link>
      <Link to={`/test/4?id=${id4}`} >Task 4 </Link>
    )
}

如果你使用的是我怀疑你的反应路由器，你可以从道具中获取查询参数。

render() {
    return (            
        <div>
            <div>
                {this.props.location.query.id}
            </div>
        </div> 
    );
}

正如G_S所提到的，您可以像这样访问路径参数：

<div>{props.match.params.id}</div>

React JS - 如何在不刷新页面的情况下使用不同的ID呈现相同的组件？

3 个答案: