Reactjs 仅匹配url中的特定ID

我正在尝试设置PageNotFound。第二条路线应仅匹配ID['1'、'2'、'3']；（无论我在api调用后得到什么，这些id值都会保存在主组件内部的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;

从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“/Pages/Home”导入主页；
从“/Pages/User”导入用户；
从“/Pages/PageNotFound”导入PageNotFound；
导入“/App.css”；
函数App（）{
返回(
;
);
}
导出默认应用程序；

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

  <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=（道具）=>{
const{id}=useParams（）
const allowedIds=useSelector（s=>s.user.allowedIds）
返回允许的id。包括（id）？：
}

---

最后，您可以使用路由的render prop删除MyCheckComponent。

是否有理由不在App.js中执行fetch调用？你可以让ID处于一个状态，并让你的路由基于这个状态，只要保持干净，只需要在那里有路由。我只是想知道如果让我们假设id是4，它将匹配第二个路由，这很好，但是应该有额外的检查，看看4是否是有效的id之一，如果不是，那么我需要重定向到页面未找到路由如果你不想在这里做检查，你也可以将用户重定向到用户组件内的页面未找到路径