reactjs - React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

Question

我主要使用 react 构建一个 bibliothek 服务, redux-toolkit和 react-router .

我想添加一个动态路由，它是一个显示被点击的书的详细信息的页面。应该可以从主页(我有一些封面书籍图片)和目录页面(显示整个列表)访问这条路线。我对此很困惑。

1. 最重要的。我想念一些东西。我尝试了以下，但没有用。我试过 navigate到 /catalogue/:bookId从主页和目录页面，但它没有呈现正确的组件。我想我误解了路线对象内 children 的意义，有什么建议吗？我应该使用 <Outlet /> 吗？哪个是正确的流程？

router.tsx 的一部分

      {
        path: '/',
        element: <Home />,
      },
      {
        path: 'catalogue',
        element: <Catalogue />,
        children: [
          {
            path: '/catalogue/:bookId',
            element: <BookDetails />
          }
        ]
      },

<Catalogue /> 的一部分我在其中为列表中的每本书呈现一个组件。

       {
          list.map((book, i) => {
            return (
              <BookCard
                book={book}
                key={`book-${i}`} />
            )
          })
        }

<BookCard />组件

const BookCard = ({ book }: {
  book: IBook;
}) => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();

  const handleClick = () => {
    dispatch(exploredBook(book));
    navigate(`/catalogue/${book.id}`)
  }

  return (
    <Col>
      <Card className="book-card">
        <Row>
          <Col>
            <Card.Img 
              className="book-img"
              variant="top"
              src={book.imageLink}
              alt={`${book.title} book cover`} />            
          </Col>
          <Col>
            <Card.Body>
              <Card.Title as={Link} to={`/catalogue/${book.id}`}>{book.title}</Card.Title>
              <Card.Subtitle>{book.author}, {book.year}</Card.Subtitle>
              {  
                book.book_status.copies <= 0
                  ? <Badge bg="danger">Out of stock</Badge>
                  : <Badge bg="success">{book.book_status.copies} copies available</Badge>
              }
              <CatalogueActions book={book} />
              <Card.Link href={book.link} target='_blank'>
                <small>More about <em>{book.title}</em> on Wikipedia</small>
              </Card.Link>
            </Card.Body>
          </Col>
        </Row>
      </Card>
    </Col>
  )
};

export default BookCard;

1. 我的第二个问题是:当用户到达图书的详细信息时，url 应该类似于 /localhost:3000/catalogue/o23ifo2eifj8249g2g24g。 .但是如果用户手写 url 并插入一个随机 id，页面将​​呈现内容。如何防止呈现内容？我的简单解决方案是，在 database 中进行搜索使用钩子(Hook) useParams()对于书面id:如果存在，则呈现相应的书，如果不存在，则呈现404页面。有更好更简单的解决方案吗？

Answer 1

使用当前路由配置:

{
  path: '/',
  element: <Home />,
},
{
  path: 'catalogue',
  element: <Catalogue />,
  children: [
    {
      path: '/catalogue/:bookId', // <-- or simply ":bookId"
      element: <BookDetails />
    }
  ]
},

path="/catalogue/:bookId" 上的嵌套 路线被渲染。

Should I use the <Outlet /> and which is the correct flow for this?

是的，在这个配置中 Catalogue组件必须呈现一个 Outlet用于将其内容呈现到嵌套路由中的组件。这是您要呈现 Catalogue 的用例和 BookDetails同时。

目录示例:

{list.map((book, i) => {
  return (
    <BookCard
      book={book}
      key={`book-${i}`} />
    )
  })
}
...

<Outlet />

如果不是这种情况并且您想要 Catalogue和 BookDetails要在各自独立的页面上呈现每个路由，则应取消嵌套路由。

例子:

{
  path: '/',
  element: <Home />,
},
{
  path: 'catalogue',
  element: <Catalogue />,
},
{
  path: '/catalogue/:bookId',
  element: <BookDetails />
}

或

{
  path: '/',
  element: <Home />,
},
{
  path: 'catalogue',
  children: [
    {
      index: true,
      element: <Catalogue />
    },
    {
      path: ':bookId',
      element: <BookDetails />
    }
  ]
},

When the user arrives on the details of thebook, the url should be something like"/catalogue/o23ifo2eifj8249g2g24g". Iif the user,write by hand the url and inserts a random id, the page will rendernevertheless the content. How can I prevent the rendering of thecontent? My simple solution would be, make a search in the databaseusing the hook useParams() for the written id: if exist, thecorresponding book is rendered, if doesn't exist, a 404 page isrendered. Is there a better simpler solution?

这是验证动态路由路径参数并将用户重定向到 404 页面或通过 BookDetails 有条件地呈现一些后备 UI 的标准做法。使用无效页面时的页面 bookId值(value)。