如何从 React 中的嵌套路由导航到不同的组件？

Question

我正在学习 React-Router，在我的导航栏上，我会从嵌套路由导航到不同的组件。

场景：

在我的导航栏上，我有组件的链接：

const App = () => {
  return (
    <Router>
      <div>
        <Navbar onSaveLoginState={saveLoginState} />
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/movies" component={Films} />
          <Route exact path="/movies/:id" component={FilmsDetailed} />
          <Route exact path="/routing" component={RoutingExample} />
          <Route exact path="/routing/:arrow" component={Child} />
          <Route exact path="*" component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
};

然后我输入“路由/某事”，当我想从导航栏导航到我的 url 上的不同组件时，只有结束地址发生了如下变化：路由/配置文件、路由/电影，但页面仍然相同。我的问题是如何从那个地方正确导航到不同的组件？

const RoutingExample = () => {
  let { url } = useRouteMatch();

  return (
    <div className="container border border-primary">
      <ul>
        <li>
          {`useParams ->`}
          <Link to={`${url}/arrow`}>
            <button className="btn btn-outline-primary">Click</button>
          </Link>
        </li>
      </ul>
    </div>
  );
};

export default RoutingExample;

在我的导航栏上：

<nav className={styles.nav}>
  <h1 className={styles.nav__logo}>MOVIES</h1>
  <ul className={`${styles.list} ${isOpen ? styles["list--active"] : ""}`}>
    {navigationLinks.map((link, index) => {
      return (
        <li className={styles["list--item"]} key={index}>
          <Link to={link.url}>{link.title}</Link>
        </li>
      );
    })}
  </ul>
  <button className="btn btn-primary" onClick={onLogin}>
    Login
  </button>
  <span>LoggedIn: {login.toString()}</span>
  <div className={styles["cart-container"]}>
    <RiShoppingCartLine
      size="2.8rem"
      className={styles["cart-container__icon"]}
    />
    <span className={styles["cart-container__inner"]}>171</span>
  </div>
  <button className={styles.hamburger} onClick={onToggleOpenMenu}>
    {isOpen ? <FaTimes /> : <GiHamburgerMenu />}
  </button>
</nav>

Answer 1

试试这个

  <h1 className={styles.nav__logo}>MOVIES</h1>
  <ul className={`${styles.list} ${isOpen ? styles["list--active"] : ""}`}>
<li className={styles["list--item"]} key={1}>
    <Link to="/movies">Movies</Link> /*And all links like that*/
</li>
  </ul>
  <button className="btn btn-primary" onClick={onLogin}>
    Login
  </button>
  <span>LoggedIn: {login.toString()}</span>
  <div className={styles["cart-container"]}>
    <RiShoppingCartLine
      size="2.8rem"
      className={styles["cart-container__icon"]}
    />
    <span className={styles["cart-container__inner"]}>171</span>
  </div>
  <button className={styles.hamburger} onClick={onToggleOpenMenu}>
    {isOpen ? <FaTimes /> : <GiHamburgerMenu />}
  </button>
</nav>

您需要将您在路由中写入的路径值放入您的链接中的“to”中 例如 <Route path="/movies" component={Films} /> 访问它使用 <Link to="/movies"> Movies <Link/>