时间戳

首页 > 解决方案 > React Router：组件未呈现，但 URL 已更新

javascript - React Router：组件未呈现，但 URL 已更新

问题描述

这种“组件未在 React Router 中渲染”类型的问题似乎是一个非常常见的问题。我浏览了所有内容，但找不到解决问题的方法。

这是我的代码的样子：

    render(){
        return(
            <div>
            <SearchBar searchBody={this.state.body}/>
            <Route path = "/ranked/" component ={Ranked}></Route>
            </div>
        );
    }

上面，创建了Ranked组件，根据子路径呈现不同的东西。（例如，localhost:3000/ranked/NBA）

function SearchDropDown(props){

    return(

        <div className = "searchDropDownItem">
                <Link to={"/ranked/"+props.item.url}>{props.item.name}</Link>
        </div>
    )
}

上面是一个带有Link标签的不同组件，它根据 url 链接到/ranked/的不同子路径。

问题是假设我在localhost:3000/ranked/NBA上。

如果我通过链接标签重定向到localhost:3000/ranked/WNBA，则 url 会正确更新，但组件会刷新到自身。

从以前相关帖子的解决方案中，我已经尝试过

<Route exact path = "/ranked" ...

但它没有用。

这里可能是什么问题？我该如何解决？

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

/route/:org如果您希望在指定路线结束时收到道具，我建议您的路线看起来像这样。然后在您的Ranked组件内部，您将使用它this.props.match.params.org来获取您想要的组织，即。（NBA，WNBA）。在您的Ranked组件中收到这些道具后，您就可以渲染该指定组织所需的任何内容。希望这有点道理。

推荐阅读