Why React router when i write " / " to path its doesnt work?

Question

In my router if I add "/" to my path its not routing. For example :

export const AppViews = () => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <Route
          path={`${APP_PREFIX_PATH}/commons`}
          component={lazy(() => import(`./commons`))}
        />

        <Redirect
          from={`${APP_PREFIX_PATH}`}
          to={`${APP_PREFIX_PATH}/commons`}
        />
      </Switch>
    </Suspense>
  );
};

Its not routing. ( " My app prefix path is " /v1" )

export const AppViews = () => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <Route
          path={`${APP_PREFIX_PATH}`}
          component={lazy(() => import(`./commons`))}
        />

         
      </Switch>
    </Suspense>
  );
};

Its routing. Its kind a strange error for me and I can't found any solution about it. I tried add "exact" but it does not work too. Thank you for all replies!

hasankzl · Accepted Answer · 2021-09-10 08:36:47Z

0

When you have multipal paths that have similar name you need to use "exact" param.

For example lets think you have 2 different roots like

<Route path="/v1" component={lazy(() => import(`./v1`))} />
<Route path="/v1/commons" component={lazy(() => import(`./commons`))} />

if you wanna go "/v1/commons" react router will return the first match which is "/v1" and not gonna return "/v1/commons".

to avoid that you need to add "exact". This will ensure that a specific router only return the exact match.

<Route path="/v1" exact component={lazy(() => import(`./v1`))} />
<Route path="/v1/commons" component={lazy(() => import(`./commons`))} />

answered Sep 10, 2021 at 8:36

hasankzl

1,0298 silver badges21 bronze badges

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

1 Comment

Uğurcan Uçar Over a year ago

thank you for reply but on my situation i just have 1 component and path (for now) and when i try route like /v1/commons its not route but if i try route like /v1 its routing and i dont have any other component or any other route path thats why its strange

Adrian Mole · Accepted Answer · 2021-09-10 10:52:26Z

0

I think it's because you're using ` (backticks) and not '; React cannot read ` ... ` as a string.

edited Sep 10, 2021 at 10:52

Adrian Mole

52.2k193 gold badges62 silver badges101 bronze badges

answered Sep 10, 2021 at 8:33

Joran

158 bronze badges

1 Comment

Captain Hat Over a year ago

I don't speak JS but it looks to me like OP isn't trying to use backticks to delimit their string literals. I think you might have misunderstood the code

Collectives™ on Stack Overflow

Why React router when i write " / " to path its doesnt work?

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related