[Solved] React Router Dom navigation problem

Recently, I have been working on ReactJS. I use React Router Dom package for page navigation. I created custom Breadcrumb links for navigation in which I used Link component from React Router Dom package.

While working on breadcrumb, I faced a problem. I found that when link is clicked the link in browser was changed but page itself did not redirect to the linked page. Code for BreadCrumb and App components are shown below.

BreadCrumb.tsx

This is the main BreadCrumb component which is being referred in other components.

import React from 'react';
import { Link } from 'react-router-dom';

interface BreadCrumbItem {
  path: string;
  active: boolean;
  title: string;
}

interface BreadCrumbProps {
  pages: Array<BreadCrumbItem>;
}

const BreadCrumb = (props: BreadCrumbProps) => (
  <Router>
    <div className="row header-page">
      <div className="col-sm-12">
        <ol className="breadcrumb">
          {props.pages.map((page: BreadCrumbItem) => (
            <li key={page.path} className={page.active === true ? 'active' : ''}>
              {page.active === true ? (
                page.title
              ) : (
                <Link to={page.path}>{page.title}</Link>
              )}
            </li>
          ))}
        </ol>
      </div>
    </div>
  </Router>
);

export default BreadCrumb;

Main App.tsx

class App extends Component<any> {
  render() {
    return (
      <Router>
        <ScrollToTop>
          <div className="cms-container">
            <div className="container">
              <Switch>
                <Route exact path="/" component={withRouter(LoginForm)} />
                <Route
                  exact
                  path="/partner"
                  component={Partner}
                />
                />
                <Route
                  exact
                  path="/partner/reward2019/:id/:action"
                  component={RewardForm}
                />
              </Switch>
            </div>
          </div>
        </ScrollToTop>
      </Router>
    );
  }
}

export default App;

Usage of BreadCrumb

<BreadCrumb
  pages={[
    {
      path: '/partner',
      active: true,
      title: 'ALL PARTNERS',
    },
  ]}
/>

After digging, I found the problem. The problem was <Router> was being added twice. The first time it was being added in **App.tsx** and second time inside` BreadCrumb.tsx. So, the solution is to take out wrapper Router from Breadcrumb component. There should only be one wrapper of <Router>. So that final BreadCrumb.tsx looks like as shown below.

const BreadCrumb = (props: BreadCrumbProps) => (
  <div className="row header-page">
    <div className="col-sm-12">
      <ol className="breadcrumb">
        {props.pages.map((page: BreadCrumbItem) => (
          <li key={page.path} className={page.active === true ? 'active' : ''}>
            {page.active === true ? (
              page.title
            ) : (
              <Link to={page.path}>{page.title}</Link>
            )}
          </li>
        ))}
      </ol>
    </div>
  </div>
);

Compare the code snippet before and after the removal of <Router> and you’ll see the difference. Hope this helps you some hour of digging to spot the problem.

Keep creating awesome apps with ReactJS.