React路由器v5在所有路由上只呈现索引页

Question

ISSUE

• 在URL中手动写入或由按钮触发的任何路由仅呈现索引页面(路由名称正在更改，页面的内容始终是索引的内容)

App.js(处理应用程序的所有主要功能)

// Exporting my router and passing all states/functions from App

<div className="App">
<Routes
........
........
........
onRemove={onRemove}
setCartOpen={setCartOpen}
cartOpen={cartOpen}
.......
.......
/>
</div>

路由器(我的路由如何工作的示例)

export default function Routes({....., ....., onRemove,setCartOpen,cartOpen,..... })
<Router>
<Header
countCartItems={cartItems.length}
cartItems={cartItems}
onAdd={onAdd}
onRemove={onRemove}
setCartOpen={setCartOpen}
/>
<Suspense fallback={<Spinner />}>
<Switch>
<Route
path={baseRouteUrl + '/'}
component={(props) => (
<IndexPage
{...props}
.......
.......
onRemove={onRemove}
setCartOpen={setCartOpen}
cartOpen={cartOpen}
.......
.......
/>
)}>
</Route>
<Route
path={baseRouteUrl + '/about'}
component={About}
></Route>
<Route
path={baseRouteUrl + ''}
component={NotFound}
></Route>
.......

和Index.js

ReactDOM.render(
<React.StrictMode>
<QueryClientProvider client={client}>
<ChakraProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</ChakraProvider>
</QueryClientProvider>
</React.StrictMode>,
document.getElementById('root')
);

注意

• 在尝试在路由中传递道具之前，路由器工作得很好

我决定以这种方式构建我的应用程序的原因是，我需要在具有所有功能的所有页面上导出我的Header。

有什么我应该用不同的方式做的吗？我知道它可能有点乱，所以我很感激学习如何更干净地处理它，最重要的是，如何使它工作，以便所有路线都能呈现正确的页面。

Answer 1

就像在大多数语言中一样，开关会匹配并运行它遇到的第一个东西。

在这种情况下，它将匹配默认路径并首先渲染该路径。

处理此问题的方法之一是将exact设置为真正的

<Route exact path={...}... />

Answer 2

react路由器进行部分匹配，因此"/"与"/about"是部分的。当使用精确时，它将禁用部分匹配，并将获得正确的路径

<Route
exact
path={baseRouteUrl + '/'}
component={(props) => (
<IndexPage
{...props}
.......
.......
onRemove={onRemove}
setCartOpen={setCartOpen}
cartOpen={cartOpen}
.......
.......
/>
)}>
</Route>