Duplicate Parameter in URL React Js / Router

Question

I am trying to build a Multi language React website, I have been struggling until i finally I prepare the structure, and now I am facing a problem which I think due to my misunderstanding of React Routes.

I have a MainLayout Layout which provide Header / Main and Footer which contain links. Using Image would be easy to describe.

Home Page Navigation

Category Page Navigation

When i click again on Power on Category Page

http://localhost:3000/en/category/power/category/power

App.js

const base = '/:lang([de|en|fr]{2})';
const fallback = '/en';
export const App = ({ store, history }) => {
return(
    <Suspense fallback={<p>...Loading</p>}>
        <I18nextProvider i18n={i18n}>
            <Provider store={store}>
                <ApolloProvider client={client}>
                    <ConnectedRouter history={history}>
                        <Switch>
                            <Route path={base} component={BaseRoutes} />
                            <Redirect to={fallback} />
                        </Switch>
                    </ConnectedRouter>
                </ApolloProvider>
            </Provider>
        </I18nextProvider>
    </Suspense>
)}

Routes.js

const BaseRoutes = ({match}) => {
return (
    <Switch>
        <Route exact path={`${match.url}/`} component={Home} />
        <Route exact path={`${match.url}/:page`} component={Dynamic}/>
        <Route exact path={`${match.url}/category/:category`} component={Category}/>
        <Route exact path={`${match.url}/detail/:url`} component={DetailArticle}/>
    </Switch>
   );
  };
export default withRouter(BaseRoutes);

Main Layout

const MainLayout = (props) => {
return (
    <>
        <Header/>
        <main>
            {props.children}
        </main>
        <Footer/>
    </>
 );
};

Navigation Link In header

<Nav>
      <Nav.Link to={`${match.url}`} as={Link} >{t('home')}</Nav.Link>
      {data.allCategories.map(item => (
       <Nav.Link to={`${match.url}/category/${item.url}`} as={Link}>
            {item.name}
       </Nav.Link>
        ))}
</Nav>

Should I test in every component the match URL ? Or there is any other way to do that ? I am using the latest Version of React / React Router

Thanks for any Tips or Help!

Livd Demo: https://codesandbox.io/s/react-nav-bug-5o2fyx

The nested routes should probably be using match.path instead of match.url. Outside this, the code has a lot of pieces and we've not quite a complete enough a context to reproduce this. Think you could provide a running codesandbox demo that reproduces this navigation/routing issue that we could inspect and debug live? We likely don't need anything higher than the ConnectedRouter, you could probably just sub in the Router from react-router-dom and pass the created history object to it. — Drew Reese
– Drew Reese, Commented Apr 14, 2022 at 19:07
thanks for your answer I will provide a codesandbox for that — Taher Ben sassi
– Taher Ben sassi, Commented Apr 14, 2022 at 19:43
@DrewReese here i made a Codesandbox, codesandbox.io/s/react-nav-bug-5o2fyx I really don't know if I should nest the routes like that! I updated my question — Taher Ben sassi
– Taher Ben sassi, Commented Apr 15, 2022 at 13:54
To see the behavior, you need to refresh the page when you go to category (link) — Taher Ben sassi
– Taher Ben sassi, Commented Apr 15, 2022 at 14:09

KOseare · Accepted Answer · 2022-04-15 14:32:15Z

1

The problem lies in how you make the "to" param of the Nav.Link:

<Nav.Link to={`${match.url}/category/${item.url}`} as={Link}>
  {item.name}
</Nav.Link>

The match.url is your current url, then you are concatenating it with the /category/${item.url}, so it's likely to have a repetition because you always use the previous url.

A possible solution could be use the lang parameter that you have assigned:

<Nav.Link
  to={`/${match.params.lang}/category/${item.url}`}
  as={Link}
>
  {item.name}
</Nav.Link>

answered Apr 15, 2022 at 14:32

KOseare

5405 silver badges12 bronze badges

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

1 Comment

Taher Ben sassi Over a year ago

Thanks! That seems to work, you saved my day! I've tried to use the Lang parameter, but I didn't consider the "/" before the match for the absolute path!

Collectives™ on Stack Overflow

Duplicate Parameter in URL React Js / Router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related