React Router change the URL but the component is not rendered I have already looked for answer but none of those example is worked Current React Router & React Router DOM version is 6. My 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;Your problem seems to be this line:
<Route path='/staff/:staffId' element={StaffWithId}/>
StaffWithId is a functional component and shoul be called with brackets < />.
like this:
<Route path='/staff/:staffId' element={<StaffWithId/>}/>