React Router loads URL in address bar but doesn't load component

Question

Codesandbox link here.

When a user clicks on a link, it should load the component in '/details'. However on click, it does load /details in the address bar but the component doesn't actually load. It only loads on going separately to /details manually in the address bar.

Routes.js

const Routes = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/details" component={MachineDetail} />
      </Switch>
    </BrowserRouter>
  );
};

MachineCard.js

export default function MachineCard({ image, title, weight, power }) {
  return (
    <>
      <div className="col-lg-4">
        <div className="card">
          <Router>
            <Link to="/details">
              <img className="img-fluid" src={image} alt={title} />
              <h2>{title}</h2>
            </Link>
          </Router>
          <p>Operating weight: {weight}</p>
          <p>Power: {power}</p>
        </div>
      </div>
    </>
  );
}

Any idea why it won't load the '/details' component in the browser?

You're exporting MachineCard from your component and using MachineDetail in your router. Is that correct? Maybe post more of your code, including the imports. — Bruno Monteiro
– Bruno Monteiro, Commented Jul 2, 2021 at 2:49

Nick · Accepted Answer · 2021-07-02 02:52:38Z

1

This issue is that you have multiple routers in your app, but you only need one. Since you already have the router defined in your index file, you can go ahead and remove it from MachineCard.js.

Your MachineCard.js component can therefore be simplified to this:

export default function MachineCard({ image, title, weight, power }) {
  return (
    <>
      <div className="col-lg-4">
        <div className="card">
          <Link to="/details">
            <img className="img-fluid" src={image} alt={title} />
            <h2>{title}</h2>
          </Link>
          <p>Operating weight: {weight}</p>
          <p>Power: {power}</p>
        </div>
      </div>
    </>
  );
}

answered Jul 2, 2021 at 2:52

Nick

16.7k3 gold badges21 silver badges38 bronze badges

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

Comments

Saral Karki · Accepted Answer · 2021-07-02 03:02:20Z

0

I think your problem is incorrect naming. In your route files you are using MachineDetail but you are exporting MachineCard.

answered Jul 2, 2021 at 3:02

Saral Karki

5,4722 gold badges10 silver badges12 bronze badges

Collectives™ on Stack Overflow

React Router loads URL in address bar but doesn't load component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related