如何仅在react-router-dom中通过带有slug的路由访问不同的组件？

Question

Lets say we have two components for Post and Project. Each post and project has slug. I want to access post and projects by slug. So we have routes:

<Route path="/:post_slug" component={PostComponent} />
<Route path="/:project_slug" component={ProjectComponent} />

And for example when you visit some post pr project, an action gets called to fetch its data by params. Something like this:

this.props.fetchPost(this.props.match.params.post_slug)
this.props.fetchProject(this.props.match.params.project_slug)

If I do only one component accessible by slug only, then it works. But if I want to access two different components by slug, then it's messed up. And ie when I visit post, react thinks that I'm visiting project.

Maybe there is some way to handle such case in react-router-dom?

Answer 1

There is no way to do this, since the router can't differentiate between the two routes. For example, if I were to navigate to site.com/my_slug , the router wouldn't know whether my_slug is supposed to be a :post_slug or a :project_slug . It's sending you to a project when they're both present because it interprets them to be the same route and so it uses the last one you define.

An alternative you could try is being a bit more explicit with your routes, like so:

<Route path="/post/:post_slug"       component={PostComponent} />
<Route path="/project/:project_slug" component={ProjectComponent} />

Answer 2

You could do this if you put the detection logic in another component, like this:

<Route path="/:any_slug" component={AnyComponent} />

Then let that component figure out what type of ID you have and render the desired sub-component accordingly:

const AnyComponent = props => {
    if (slugIsProject(props.match.params.any_slug)) {
        return <ProjectComponent id={props.match.params.any_slug} />;
    } else {
        return <PostComponent id={props.match.params.any_slug} />;
    }
}

This way the router always renders the same component ( AnyComponent ) but that component appears differently depending on what the ID is determined to be.