Question

我有一个实现了 React 路由器的应用程序，并且在其中一个组件中嵌套了另一个路由器，因为我需要能够从该组件导航到不同的子组件。

在我尝试构建一个链接以脱离该特定组件并导航到“母”路由器之前，该实现运行良好。

出于某种原因，我无法理解，当我单击链接时，URL 会正确更改，但显示的组件没有更改。我试图摆脱的组件留在那里，而我试图摆脱的组件没有呈现。

欢迎提供任何提示或想法。完整代码可在此处找到：https://github.com/coccagerman/sweetkicks

这是主路由器：

        <Router>

      <Context.Provider value={{ wishList: wishList, wishlistAdd: wishlistAdd, wishlistSubstract: wishlistSubstract, shoppingCart: shoppingCart, shoppingCartAdd: shoppingCartAdd, shoppingCartSubstract: shoppingCartSubstract, emptyShoppingCart: emptyShoppingCart, addNumberThousandSeparator: addNumberThousandSeparator, findInWishlist: findInWishlist, searchParams: searchParams, setSearchParams: setSearchParams }}>

        <Header setDarkMode={setDarkMode} darkMode={darkMode} productsDataBase={productsDataBase} setProductsArray={setProductsArray} />

        <Switch>
          <Route path='/' exact>
            <Hero darkMode={darkMode} productsDataBase={productsDataBase} setProductsArray={setProductsArray} />
          </Route>

          <Route path='/gallery'>
            <Gallery darkMode={darkMode} productsDataBase={productsDataBase} productsArray={productsArray} setProductsArray={setProductsArray} />
          </Route>

          <Route path='/item'>
            <Item  />
          </Route>

          <Route path='/shoppingcart'>
            <ShoppingCart />
          </Route>

          <Route path='/wishlist'>
            <Wishlist />
          </Route>

          <Route path='/checkout'>
            <Checkout />
          </Route>

          <Route path='/orders'>
            <MyOrders />
          </Route>

          <Route path='/about'>
            <About productsDataBase={productsDataBase} setProductsArray={setProductsArray} />
          </Route>
        </Switch>

        <Footer />

      </Context.Provider>

    </Router>

这是 CheckoutForm 组件内的嵌套路由器，它是 Checkout 组件的子级：

        <Router>
        <Switch>
            <Route path='/checkout/personalDataFormStep'>
                <PersonalDataFormStep setFullName={setFullName} setTelephone={setTelephone} setEmail={setEmail} />
            </Route>

            <Route path='/checkout/addressFormStep'>
                <AddressFormStep setAddress={setAddress} setCity={setCity} setLocation={setLocation} />
            </Route>

            <Route path='/checkout/creditCardFormStep'>
                <CreditCardFormStep setCardNumber={setCardNumber} setInstallments={setInstallments} />
            </Route>

            <Route path='/checkout/confirmationFormStep'>
                <ConfirmationFormStep purchaseData={purchaseData} />
            </Route>

            <Route path='/checkout/completionFormStep'>
                <CompletionFormStep />
            </Route>
        </Switch>   
    </Router>

这些是我试图在 CompletionFormStep 组件中实现的链接，它是 CheckoutForm 组件的子级：

                <Link to="orders" >
                <button className='btn-secondary'>My orders</button>
            </Link>
            <Link to="/gallery" >
                <button className='btn-primary'>Explore</button>
            </Link>

Answer 1

您只需要 <Router/> 在根级别只需一次。您应该从嵌套的 <Router> 组件中删除 CheckoutForm。

此外，最好使用来自 react 路由器上下文的 path 和 url 创建 nested routes，例如：

const CheckoutForm = () => {
  const { path } = useRouteMatch();
  return (
    <Switch>
      <Route path={`${path}/confirmationFormStep`}> // using path here
        <ConfirmationFormStep purchaseData={purchaseData} />
      </Route>
      <Route path={`${path}/completionFormStep`}> // and here
        <CompletionFormStep />
      </Route>
    </Switch>
  );
};

反应路由器链接和嵌套路由的问题

1 个答案: