如果 id 不匹配 path='/admin/edit/:id' 那么它应该转到 Reactjs 中的 NOTFOUND 页面答案

【问题标题】：If id doesn't match path='/admin/edit/:id' then it should go to NOTFOUND page in Reactjs如果 id 不匹配 path='/admin/edit/:id' 那么它应该转到 Reactjs 中的 NOTFOUND 页面
【发布时间】：2021-07-15 04:44:40
【问题描述】：

我想在 path='/admin/edit/:id' 确切的组件 ={Edit} 中传递那些在表中注册的 id。但是当我传递任何其他值时，它会返回到 Edit Component。如果这些 id 与表中的 id 匹配，我只想去编辑页面。如果这些不匹配，那么它应该转到 NOTFOUND 页面而不更改 url

例如：

array = [ { id=1,name='ash' }, { id=2,name='ash' } ]

如果 array.id 匹配 path='/admin/edit/:id' 那么它应该转到他们的页面，但如果不匹配则应该转到NotFound 页面而不更改 url。网址不应更改。

请大家帮忙

Admin.jsx

const history = useHistory();

const[students,setStudents] = React.useState(()=> JSON.parse(localStorage.getItem('students')) || [])

const editStudent = (event)=>{

  let found = students.map(student=>student.id).includes(Number(event.currentTarget.id))

  if(found){

    history.push(`/admin/edit/${Number(event.currentTarget.id)}`)
  }
}

App.jsx

函数 App() {

返回（

<Router>
  <div>
    <Switch>
    <Route path ="/" exact component={SignIn}/>
      <Route path='/admin/edit/:id' exact component = {Edit}/>
      <Route path = '/admin/add' exact component = {Add} />
      <Route path = "/register" exact component = {Register} />
      <Route path ="/admin" exact component={Admin}/>          
      <Route component={NotFound} />
      
    </Switch>
    </div>
</Router>
);

} 编辑.jsx

const [students,setStudents] = React.useState(JSON.parse(localStorage.getItem('students')) || [])

const { id } = useParams();


let unique_student_array = students.filter(student=>student.id == id)
let found_id = students.map(student=>student.id).includes(Number(id));
if(!found_id){
    // I want to redirect to **NOTFOUND PAGE**
}

【问题讨论】：

这你需要在组件内部做...类似于if (id == invalid) return <NotFoundComponent />
在哪个组件中？你能告诉我怎么做吗？我可以把整个文件发给你，我在这 2 天里很忙
Edit 组件，因为那是您想要保留的 url，即使它没有找到
你的意思是编辑组件的return语句吗？我们在哪里渲染？我试过了，但它显示了太多渲染的错误
我将给出我的“加载”组件示例：在实际组件返回之前，如果没有数据，则返回加载组件。

标签： reactjs

【解决方案1】：

function MyComponent({something}){
  if (something) return <NotFoundComponent />

  return <ActualComponent />
}

如果something，这样的东西会呈现“未找到”

否则，它将正常渲染

【讨论】：