React 路由器更改 url 但不重新渲染答案

【问题标题】：React router changes url but not re-renderReact 路由器更改 url 但不重新渲染
【发布时间】：2022-01-03 14:48:55
【问题描述】：

React Router 更改 URL 但组件未呈现我已经在寻找答案，但这些示例都没有工作当前 React Router 和 React Router DOM 版本是 6。我的主要组件：

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;

【问题讨论】：

仅供参考，“员工”已经是复数（技术上是大众/集体名词）。因此，“员工”是不明智的。您可以将staff 用于组，将staffMember 用于个人。
您好！如果您认为某个答案解决了问题，请单击绿色复选标记将其标记为“已接受”。这有助于将注意力集中在仍然没有答案的旧问题上。

标签： javascript html reactjs

【解决方案1】：

您的问题似乎是这一行：
<Route path='/staff/:staffId' element={StaffWithId}/>

StaffWithId 是一个功能组件，应该用括号 < /> 调用。
像这样： <Route path='/staff/:staffId' element={<StaffWithId/>}/>

【讨论】：

感谢@Manuel Herrera，它对我有用