反应路由器 link 和嵌套路由的问题

Question

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

在我尝试构建一个 link 以便能够离开该特定组件并导航 'mother' 路由器之前，该实施工作正常。

出于某种原因，我无法理解，当我单击 link 时，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 组件中实现的 links，它是 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/> 在根级别 一次。您应该从嵌套的 CheckoutForm 组件中删除 <Router>。

此外，最好使用 path 和 url 从 react 路由上下文创建 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>
  );
};

反应路由器 link 和嵌套路由的问题

Problem with react router link and nested routing

routes

reactjs

react-router

react-hooks