Бесконечный цикл в Reach Router

Я немного новичок в React, и я впервые использую рич-маршрутизатор (или любой другой маршрутизатор). То, что я пытаюсь сделать, это иметь вложенный компонент внутри одной из моих ссылок на маршрутизатор. По сути, в моем компоненте ItemShop я хочу иметь еще две ссылки на компоненты (обе из которых определены в моем компоненте ItemShop), и я хочу отображать любой компонент, выбранный на панели навигации. Это похоже на то, что они делают в руководстве, но по какой-то причине я Кажется, я получаю бесконечный цикл, когда я нажимаю на ссылку.

Вот мой маршрутизатор верхнего уровня в 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>
  );
}

А это мой компонент ItemShop, в котором я пытаюсь отобразить ссылки, 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}         
    )
  }
}

Опять же, я очень новичок в Javascript/React в целом, так что это может быть просто фундаментальным недостатком. Я уже потратил на это довольно много часов, поэтому я был бы очень признателен за некоторые советы. Спасибо за ваше время!


reactjs infinite-loop reach-router
person FlackoNeil    schedule 22.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я попытался использовать React-Router-Dom вместо reach-router. Я сделал так, чтобы компоненты <Upcoming /> и <Current /> отображались внутри компонента <ItemShop />. Вы можете проверить, как я это сделал ниже. Надеюсь, это поможет.

// 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>

person vtiron2002    schedule 22.06.2020
comment
В итоге я использовал кнопки и тернарный оператор состояния +, чтобы показать свои компоненты, и это сделало то, что мне было нужно. Хотя спасибо за помощь! :) - person FlackoNeil; 22.06.2020
comment
Да, это тоже работает. Я собирался показать, что ты тоже так можешь. Оставьте голос за мой ответ. Спасибо - person vtiron2002; 22.06.2020