CODEWITHSUNDEEP
javascripthtmlreactjs
Viet Nguyen
Viet Nguyen

Reputation: 91

React router changes url but not re-render

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;

Upvotes: 1

Views: 727

Answers (1)

Manuel Herrera
Manuel Herrera

Reputation: 341

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

Upvotes: 3

Related Questions