0

我对 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 还是很陌生，所以它可能只是一个基本缺陷。我已经为此投入了好几个小时，所以我非常感谢一些指导。感谢您的时间！

4

1 回答 1

0

我尝试使用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>

于 2020-06-22T04:00:20.077 回答