javascript - 如何在某种情况下重定向页面？

Question

我在项目中编写的路由如下:

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route exact path='/login' element={<Login />} /> 
  <Route exact path='/about' element={<About />} />
  <Route exact path='/store' element={<Store />} />
  <Route exact path='/store/:productID' element={<Product />} />
  <Route path={['/not-found', '*']} element={<NotFound />} /> 
</Routes>

在Product页面中，我想显示现有的产品ID并将其他产品重定向到未找到的页面:

{!check && navigate("/not-found", {replace: true})}
<div className="container">
  <ul>
    <li>Product ID: {productID}</li>
    <li>Name: {check.name}</li>
    <li>Price: {check.price}</li>
    <li><img src={check.image} /></li>
  </ul>
</div>

但我收到此错误: 未捕获类型错误:meta.relativePath.startsWith 不是函数

我还用导航组件编写了它:

{!check && <Navigate to="/not-found" />}

对于不存在的 ID 仍显示白页。

Answer 1

Route 组件的 path 属性仅采用字符串值，而不是数组。您需要将两条路由路径分开。我建议在 path="/not-found" 上渲染 NotFound 组件，并将所有未处理/未知的路径重定向到它。

示例:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/login" element={<Login />} /> 
  <Route path="/about" element={<About />} />
  <Route path="/store" element={<Store />} />
  <Route path="/store/:productID" element={<Product />} />
  <Route path="/not-found" element={<NotFound />} />
  <Route path="*" element={<Navigate to="/not-found" replace />} />
</Routes>

如果您尝试在渲染返回中应用重定向逻辑，产品页面还应该渲染Navigate组件。

{check
  ? (
    <div className="container">
      <ul>
        <li>Product ID: {productID}</li>
        <li>Name: {check.name}</li>
        <li>Price: {check.price}</li>
        <li><img src={check.image} /></li>
      </ul>
    </div>
  )
  : <Navigate to="/not-found" replace />
}

否则，navigate 函数只能在回调或 useEffect Hook 中调用。

useEffect(() => {
  if (!check) {
    navigate("/not-found", { replace: true });
  }
}, [check]);

...

if (!check) {
  return null;
}

return (
  ...
  <div className="container">
    <ul>
      <li>Product ID: {productID}</li>
      <li>Name: {check.name}</li>
      <li>Price: {check.price}</li>
      <li><img src={check.image} /></li>
    </ul>
  </div>
  ...
);