Infinite Loop in Reach Router

Question

I'm a bit new to React and it is my first time using reach-router (or any kind of router really). What I'm trying to do is have a nested component inside one of my router links. Basically, within my ItemShop component, I want to have two more links to components (both of which are defined within my ItemShop component), and I want to display whichever component is selected under the navbar. It seems similar to something they do in the tutorial, but for some reason I seem to get an infinite loop when I click on a link.

Here is my top-level router, in App.js:

function App() {
  return (
    <div>
      <Router>
        <HomePage path="/" />
        <ItemShop path="ItemShop" />
        <Item path="ItemShop/:id" />
        <Challenge path="Challenge" />
        <Achievements path="Achievements" />
        <BattlePass path="BattlePass" />
        <Miscellaneous path="Miscellaneous" />
      </Router>
    </div>
  );
}

And this is my ItemShop component where I'm trying to render the links, ItemShop.js:

render() {
    // ... assigning arrays here

    let Current = () => ( //...);

    let Upcoming = () => ( //...);

    return(
      <>
      <div className="nav-container">  
        <Navbar />
      </div>
     
      //...
        <div>
          <nav className="side-nav">
            <Link to="/current">Current</Link>{" "}
            <Link to="/upcoming">Upcoming</Link>
          </nav>
        
          <Router>
            <Current path="current" />
            <Upcoming path="upcoming" />
          </Router>
        </div> 
      //...
      {this.props.children}         
    )
  }
}

Again I am very new to Javascript/React as a whole, so it could just be a fundamental flaw. I have already sunk quite a few hours into this so I would really appreciate some guidance. Thank you for your time!

Answer 1

I tried using React-Router-Dom instead of reach-router. I made it so it renders both <Upcoming /> and <Current /> components inside of the <ItemShop /> component. You can check it out how I have done it below. I hope this helps.

// import React from "react";
// import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/itemShop" component={ItemShop} />
          <Route path="/itemShop/:id" component={Item} />
          <Route path="/challenge" component={Challenge} />
          <Route path="/achievements" component={Achievements} />
          <Route path="/battlePass" component={BattlePass} />
          <Route path="/miscellaneous" component={Miscellaneous} />
        </Switch>
      </Router>
    </div>
  );
}

const HomePage = () => {
  return <div>Home Page</div>;
};

const ItemShop = () => {
  const Current = () => {
    return <div>Current</div>;
  };

  const Upcoming = () => {
    return <div>Upcoming</div>;
  };

  return (
    <div>
      <div>Item Shop</div>
      <Link to="/itemShop/current">Current</Link>{" "}
      <Link to="/itemShop/upcoming">Upcoming</Link>
      <br />
      <br />
      <Route
        render={() =>
          window.location.pathname === `/itemShop/current` ? (
            <Current />
          ) : (
            <Upcoming />
          )
        }
      />
    </div>
  );
};

const Item = () => {
  return <div>Item</div>;
};

const Challenge = () => {
  return <div>Challenge</div>;
};

const Achievements = () => {
  return <div>Achievements</div>;
};

const BattlePass = () => {
  return <div>BattlePass</div>;
};

const Miscellaneous = () => {
  return <div>Miscellaneous</div>;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/6.0.0-beta.0/react-router-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>