React Router: Component is not rendering but the URL is updated

Question

This kind of " component not rendering in React Router " type of questions seem to be a very frequently asked question. I have looked through everything but I could not find a solution for my problem.

Here is how my code look like:

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

Above, the component Ranked is created which, depending on the subpath renders different things. (For example, localhost:3000/ranked/NBA )

function SearchDropDown(props){

    return(

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

Above is a different component with the Link tag, which, depending on the url, links to different subpath of /ranked/ .

The problem is that let say I am on localhost:3000/ranked/NBA .

If I get redirected to localhost:3000/ranked/WNBA through the linked tag, the url is updated correctly but the component is refreshed to itself.

From the solutions from previous related posts, I have tried

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

But it didn't work.

What could be the problem here? How do I solve it?

Answer 1

I would recommend your route look something like this instead /route/:org if you expect to receive props at the end of that specified route. Then inside your Ranked component you would use this.props.match.params.org to get the organization you want ie. (NBA, WNBA). After you have received these props in your Ranked component then you can render what ever you need for that specified organization. Hopefully this makes some sense.