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!
I think it's because you're using ` (backticks) and not '; React cannot read ` ... ` as a string.
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`))} />