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

【问题标题】：React Router: Component is not rendering but the URL is updatedReact Router：组件未呈现，但 URL 已更新
【发布时间】：2020-05-19 21:19:19
【问题描述】：

这种“组件未在 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" ...

但是没有用。

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

【问题讨论】：

我认为这是因为您以 <Route></Route> 方式编写了 Route 组件。在这种情况下，React 尝试渲染两个标签之间的内容。尝试使用单个标签<Route />，或编写以下代码：<Route><Ranked></Route>
我刚试了一下，好像没用。我也尝试使用作为确切的路径，但它仍然没有工作。
我认为您误用了路由器。试着看看这里的例子：reacttraining.com/react-router/web/guides/quick-start。您的 Route 元素应该在 BrowserRouter 元素内才能正常工作

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

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

【讨论】：