请将父 <Route path="/"> 更改为 <Route path="*">答案

【问题标题】：Please change the parent <Route path="/"> to <Route path="*">请将父 <Route path="/"> 更改为 <Route path="*">
【发布时间】：2022-01-06 07:55:48
【问题描述】：

我在 React 应用程序中收到此警告：

You rendered descendant <Routes (or called `useRoutes()`) at "/" (under <Route path="/">) 
but the parent route path has no trailing "*". This means if you navigate deeper, 
the parent won't match anymore and therefore the child routes will never render.

Please change the parent <Route path="/"> to <Route path="*">.

这是我的代码：

<Router>
        <Routes>
            <Route exact path="/login" element={<Login />} />

            <Route exact path="/" element={<AppBody />} >
              <Route exact path="/add-edit-profile" element={<PageContent />} />
              <Route exact path="/profile-list" element={<ProfileList />} />
              
            </Route>
        </Routes>
    </Router>

AppBody.js：

                <Sidebar/>
                <div className='page-content'>
                    <Header />
                </div>
                
                <Routes>
                    <Route exact path="/add-edit-profile" element={<PageContent />} />
                    <Route exact path="/profile-list" element={<ProfileList />} />
                    
                </Routes>

我必须在我的代码中更改什么来修复警告？

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

这意味着AppBody 正在渲染更深层次的嵌套路由，路径需要指定通配符* 以表示它可以匹配更通用/嵌套的路径。 react-router-dom 路由路径总是完全匹配，所以如果子路由被渲染，路径需要允许它们。将path="/" 更改为path="/*"。

由于AppBody 正在渲染路由，而嵌套的Route 组件没有Outlet，因此可以安全地删除它们。

<Router>
  <Routes>
    <Route exact path="/login" element={<Login />} />
    <Route exact path="/*" element={<AppBody />} > />
  </Routes>
</Router>

【讨论】：