React route does not detect nesting routing and ids

Question

I have some React routes that when I nest one route inside another, I need to repeat the route path.

To explain, for example:

<Route
        path="admin">
        <Switch>
            <Route
                path="admin/specific/:id"
                component={SpecificAdmin} />
            <Route
                exact
                path="admin"
                component={AdminPage}>
            </Route>
            <Route
                exact
                path="admin/edit/new"
                component={EditSpecificAdmin} />
        </Switch>
    </Route>

I want a page where I can see the list of items, one for adding a new one and another for looking, editing a specific item. So I thought about the paths edit/new and specific/1. So the routes do not detect when I write specific/1 (the specific id) and not either the admin nesting, so I need to write the admin in each one...

can you share full code so anyone was able to recreate your issue? — Malakai
– Malakai, Commented Nov 15, 2019 at 15:51
Basically, what you want is to pass to your nested route '/specific/:id', '/', '/edit/new'. is that so ? — Thomas Bihan-Poudec
– Thomas Bihan-Poudec, Commented Nov 15, 2019 at 15:53
as @tareqAziz answer, you can get some of those intel in props, in one of my project, I created another router for the nested route. ie: in your project, i would create a AdminRouter component and pass the pass as path={${match.path}/specific/:id}, etc — Thomas Bihan-Poudec
– Thomas Bihan-Poudec, Commented Nov 15, 2019 at 16:00
I think match.path will return /something/:id which is actually a format, not a partial url of current page. Rather match.url will return /something/1 or /something/anything which can be used as current page's url — tareq aziz
– tareq aziz, Commented Nov 15, 2019 at 16:23

Thomas Bihan-Poudec · Accepted Answer · 2019-11-15 16:10:33Z

1

As Tareq aziz said, you can easily have intel in props.

You can create another router to pass easily new value:

// your original component
import AdminRouter from './Admin/Router';

export default () => {
  return (
    <Route path="admin">
     <AdminRouter />     
    </Route>
  );
}

// in ./Admin/Router.js
export default (props) => {
  return (
    <Switch>
        <Route 
            exact
            path={`${props.match.path}/specific/:id`}
            component={SpecificAdmin}
        />
        <Route 
            exact
            path={`${props.match.path}`}
            component={AdminPage}
        />
        <Route 
            exact
            path={`${props.match.path}/edit/new`}
            component={EditSpecificAdmin}
        />
    </Switch>
  );
}

I'm not sure though if the order of the routes are correct.

answered Nov 15, 2019 at 16:10

Thomas Bihan-Poudec

1658 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pichi Wuana Over a year ago

That's nice but I'm trying to understand why the route does not do this by itself

tareq aziz Over a year ago

@PichiWuana Because it keeps open to configure by user

tareq aziz · Accepted Answer · 2019-11-15 16:03:02Z

1

I think you can get your current page's url from props using location.pathname or match.url. You can see my image. Then you may add your nested route after that. Hope it will help you

You may code your path like this way

path=`${this.props.location.pathname}/edit/new`

path=`${this.props.location.pathname}/specific/:id`

edited Nov 15, 2019 at 16:03

answered Nov 15, 2019 at 15:57

tareq aziz

7874 silver badges12 bronze badges

Collectives™ on Stack Overflow

React route does not detect nesting routing and ids

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related