与参数反应的路由问题答案

【问题标题】：Problem with routing in react with params与参数反应的路由问题
【发布时间】：2021-05-03 16:26:14
【问题描述】：

嘿，伙计们，我正在学习在尝试建立网站时做出反应，我遇到了使用参数和不使用参数的路由问题。我在 index.js 中有这些路由，

这是书的家

<Route exact path="/books/bookshome" component={BookList} />

以及获取单本书籍的另一种途径

<Route exact path="/books/:slug" component={SingleBook} />

问题是每当我打开BookList 时，SingleBook 组件都会发送一个 api 请求并返回错误。我怎样才能避免这种情况？

我尝试在SingleBook 中检查useEffect 中的条件，但它似乎不起作用。

if(slug !=="bookshome") { fetch }

有没有办法解决这个问题或者我应该改变网址？

谢谢

【问题讨论】：

【解决方案1】：

将 BookList 路由保持在 SingleBook 路由之上，并从 slug 路由中删除：

<Route exact path="/books/bookshome" component={BookList} />
<Route path="/books/:slug" component={SingleBook} />

【讨论】：

【解决方案2】：

使用 /books 的最佳实践是 BookList 组件和 /books/:id or /books/:name，这也应该可以解决您的问题。

如果您想保持 url 原样，请尝试将 BookList 路由放在 Single Book 路由之上，并仅使用 BookList 路由的确切参数

我建议更改 URL 并遵循最佳做法。

【讨论】：