Question

这类“ 组件未在React Router中呈现”问题似乎是一个非常常见的问题。我已经仔细阅读了所有内容，但找不到解决方案。

这是我的代码的样子：

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

上面，创建了排名组件，该组件根据子路径呈现不同的内容。（例如， localhost：3000 / ranked / NBA ）

function SearchDropDown(props){

    return(

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

以上是带有 Link 标记的不同组件，该标记根据URL链接到 / rank / 的不同子路径。

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

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

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

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

但这没用。

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

Answer 1

如果您希望在指定路线的末尾收到道具，我建议您的路线看起来像这样/route/:org，而不是Ranked。然后，在this.props.match.params.org组件内部，您将使用Ranked获得所需的组织，即。（NBA，WNBA）。在/home/db2inst8/sqllib/db2profile组件中收到这些道具后，即可呈现该指定组织所需的一切。希望这是有道理的。

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

1 个答案: