React router changes url but not re-render

Question

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;

FYI, "staff" is already plural (technically a mass/collective noun). Therefore, "staffs" is not sensible. You might use staff for the group and staffMember for the individual. — isherwood
– isherwood, Commented Jan 3, 2022 at 14:54
Hi there! If you feel an answer solved the problem, please mark it as 'accepted' by clicking the green check mark. This helps keep the focus on older questions which still don't have answers. — Manuel Herrera
– Manuel Herrera, Commented Jan 5, 2022 at 19:09

Manuel Herrera · Accepted Answer · 2022-01-03 15:26:03Z

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/>}/>

Collectives™ on Stack Overflow

React router changes url but not re-render

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related