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

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/>一次。您应该从嵌套的CheckoutForm组件中删除<Router>。

此外，最好从react路由器上下文中使用path和url创建嵌套路由，例如：

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>
);
};