I'm wondering if there is a remended way to construct URLs for my links in my react-router based app. In the world of Zend Framework for php, I'd be using a url helper which used reverse routes. I'd feed in my route name and params to a route config, and it would spit out the URL that I'd link to (or push to in the case of react-router).

I found this: but it looks like it only supports up to version 1 of react-router. I'm on version 3.

I'm wondering if there is a remended way to construct URLs for my links in my react-router based app. In the world of Zend Framework for php, I'd be using a url helper which used reverse routes. I'd feed in my route name and params to a route config, and it would spit out the URL that I'd link to (or push to in the case of react-router).

I found this: but it looks like it only supports up to version 1 of react-router. I'm on version 3.

• javascript
• react-router

Share Improve this question Follow edited Jun 30, 2018 at 22:22 falinsky 7,43844 gold badges3434 silver badges5858 bronze badges asked Feb 24, 2017 at 0:07 xanldxanld 1,07722 gold badges1313 silver badges2323 bronze badges 1

• 1 it existed in (very very) early versions but has been later wiped out. anybody who gets here by searching and asks the same question may follow teh drama starting from therad github./ReactTraining/react-router/issues/1514 and all follow-up discussions. – skyboyer Commented Nov 4, 2018 at 10:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

With same intention I've finished up using generatePath from 'react-router-dom' package.

E.g. projects/routes.js contains config:

import {generatePath} from "react-router-dom";

export const EDIT = {
    route: "/projects/:id",
    generate(id) {
        return generatePath(this.route, {id})
    }
}

And <Route> relies on .route part:

<Route path={ProjectRoutes.EDIT.route} ponent={ProjectEdit} />

While <Link> relies on .generate()

<Link to={ProjectRoutes.EDIT.generate(someVariable.id)}>Edit me!</Link>

It's definitely not reversing by name. But I found this approach more predictable and flexible since there are no chances to run into name conflict.