Question

因此，如果我的 Web 应用程序中的路径未定义或由于某些内容已被删除而未呈现任何内容，我将尝试显示 404 页面。例如，用户可以创建书籍，书籍 id 成为该页面的路径。但是如果用户删除那本书，路径将是未定义的。因此，如果发生这种情况，我希望能够确保任何其他尝试进入该页面的用户都显示 404 消息。例如，链接可以是 '/家/未定义' 要么 '/未定义/书籍'

Answer 1

我会先检查 book_id，如果没有找到重定向。

import {useHistory} from "react-router-dom"

function App() {

   const history = useHistory();
 
   if (!bookId) {
     history.push("/404");
     return null;
   }
   return <></>
}

Answer 2

要创建任何类型的“404 路由”，您只需添加一个匹配任何 URL 的路由，并在 switch 标记中与有效路由一起使用它。例如：

<Switch>
  <Route path ="/home" component={Home} />
  <Route path ="/home/book" component={Book} />
  <Route path ="/" component={FourZeroFour} />
</Switch>

您也可以通过不使用 Switch 而是在除最后一条以外的每条路线上使用 exact 来达到相同的效果：

<Route path ="/home" component={Home} exact />
<Route path ="/home/book" component={Book} exact />
<Route path ="/" component={FourZeroFour} />

但是，如果您有一个可能同时匹配无效和有效 URL 的路由，例如：

  <Route path ="/home/book/:bookId" component={SpecificBook} />

（其中 :bookId 可能是undefined）

在这种情况下，您需要检查组件内 URL 参数的有效性。例如，您的 SpecificBook 组件可能会执行以下操作：

const SpecificBook = ({ bookId } ) => {
  if (bookId === 'undefined') return <Redirect to="/404" />;
  // rest of component
}

您可以也可以使用 history.push，但是 Redirect 标签的作用不仅仅是添加一个 history 条目；它将模拟（服务器端）重定向。

反应路由器路径

2 个答案: