时间戳

首页 > 解决方案 > 仅匹配 url 中的特定 id

reactjs - 仅匹配 url 中的特定 id

问题描述

我正在尝试设置 PageNotFound。第二条路线应该只匹配 ids ['1', '2', '3']; （这些 id 值是我在 api 调用之后得到的。所以我从 Home 组件内部将值保存在 redux 存储中）。现在，当我尝试访问不正确的 ID 时，它应该重定向到 PageNotFound。如果 url 中的 id 是 4，它应该重定向到 PageNotFound。

当它被重定向时我是否实现了这是用户组件，或者有没有办法在下面的 App.js 文件本身中设置它？

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./Pages/Home";
import User from "./Pages/User";
import PageNotFound from "./Pages/PageNotFound";

import "./App.css";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/user/:id" exact component={User} />
          <Route path="*" exact component={PageNotFound} />
        </Switch>
      </Router>
      ;
    </div>
  );
}

export default App;

标签： reactjsreact-routerreact-router-dom

解决方案

您可以为验证目的创建通用组件。解决方案应该是这样的

  <Route path="/user/:id" exact component={MyCheckComponent} />

MyCheckComponent.jsx


const MyCheckComponent =(props) => {
   const {id} = useParams()
   const allowedIds = useSelector(s => s.user.allowedIds)
   return allowedIds.includes(id) ? <User {...props} /> : <Redirect to="/not-found"/>
}

最后，您可以使用路由的渲染道具消除 MyCheckComponent。

推荐阅读