[英]React router changes url but not re-render
React Router 更改了 URL 但組件未呈現我已經在尋找答案但這些示例都沒有工作當前 React Router 和 React Router DOM 版本為 6。我的 MainComponent:
import React, { Component } from 'react'; import Header from './HeaderComponent'; import Footer from './FooterComponent'; import { Routes, Route, Redirect } from 'react-router-dom'; import Stafflist from './StaffComponent'; import {STAFFS} from '../shared/staffs'; import StaffDetail from './StaffDetailComponent'; class Main extends Component{ constructor(props){ super(props); this.state ={ staffs: STAFFS }; } render(){ const StaffWithId = ({match}) =>{ return( <StaffDetail staff={this.state.staffs.filter((staff) => staff.id === parseInt(match.params.staffId,10))}/> ) } return( <div> <Header/> <Routes> <Route exact path='/staff' element={<Stafflist staffs={this.state.staffs} />}/> <Route path='/staff/:staffId' element={StaffWithId}/> </Routes> <Footer/> </div> ); } } export default Main;
您的問題似乎是這一行:
<Route path='/staff/:staffId' element={StaffWithId}/>
StaffWithId 是一個功能組件,應該用括號< />
調用。
像這樣: <Route path='/staff/:staffId' element={<StaffWithId/>}/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.