嵌套路由 react-router-dom v6 不工作

Question

我是 React 的新手，我正在关注 this 项目。但是我坚持转换 react-router-dom.

版本 6 中的嵌套路由

在V5中是这样的：

App.js

  return (
      <div>
        <Header />
        <Switch>
          <Route exact path='/' component={HomePage} />
          <Route path='/shop' component={ShopPage} />
          <Route exact path='/checkout' component={CheckoutPage} />
          <Route
            exact
            path='/signin'
            render={() =>
              this.props.currentUser ? (
                <Redirect to='/' />
              ) : (
                <SignInAndSignUpPage />
              )
            }
          />
        </Switch>
      </div>
    );

商店页面

      const ShopPage = ({ match }) => (
  <div className='shop-page'>
    <Route exact path={`${match.path}`} component={CollectionsOverview} />
    <Route path={`${match.path}/:collectionId`} component={CollectionPage} />
  </div>
);

我想在 V6 中转换它，我试过如下：

我的App.js

return (
  <div >
    <Header />
    <Routes>
      <Route path='/' element={<HomePage />} />
      <Route path='/shop' element={<ShopPage />} />
        
      <Route path='/checkout' element={<CheckoutPage />} />
      <Route path='/signin' element={<>
        {this.props.currentUser ?
          <Navigate to="/" />
          :
          <SignInAndSignUpPage />

        }
      </>
      }

      />

      <Route path='/signin' element={this.props.user ? <Navigate to="/" /> : <SignInAndSignUpPage />} />
     

    </Routes>
  </div>
);

我的商店

    const ShopPage = () => {
    let { pathname } = useLocation();

    console.log(pathname);
   
    return (
        <div className='shop-page'>
            <Routes>
                <Route path={`${pathname}`} element={<CollectionsOverview />} />
                <Route path={`${pathname}/:collectionId`} element={<CollectionItems />} />
            </Routes>
        </div>
    )
};

在路径名控制台日志中，我得到 /shop 但项目没有显示。如何在 v6 中实现嵌套路由？

Answer 1

看起来 CollectionsOverview 正是在 "/shop" 上呈现的内容。嵌套路由在 v6 中的操作与在 v5 中的操作略有不同。你不需要获取当前path/url来构建嵌套routes/links，你可以只使用相对路由。

示例：

const ShopPage = () => {
  return (
    <div className='shop-page'>
      <Routes>
        <Route path="/" element={<CollectionsOverview />} />
        <Route path=":collectionId" element={<CollectionItems />} />
      </Routes>
    </div>
  );
};

您可以选择将 ShopPage 转换为布局路线。

示例：

import { Outlet } from 'react-router-dom';

const ShopPage = () => (
  <div className='shop-page'>
    <Outlet />
  </div>
);

应用程序

return (
  <div >
    <Header />
    <Routes>
      <Route path='/' element={<HomePage />} />
      <Route path='/shop' element={<ShopPage />}>
        <Route index element={<CollectionsOverview />} />
        <Route path=":collectionId" element={<CollectionItems />} />
      </Route>
      <Route path='/checkout' element={<CheckoutPage />} />
      <Route
        path='/signin'
        element={this.props.currentUser
          ? <Navigate to="/" />
          : <SignInAndSignUpPage />
        }
      />
      <Route
        path='/signin'
        element={this.props.user
          ? <Navigate to="/" />
          : <SignInAndSignUpPage />
        }
      />
    </Routes>
  </div>
);

嵌套路由 react-router-dom v6 不工作

Nested routing react-router-dom v6 not working

javascript

reactjs

react-router-dom