using same component for different route path in react-router v6

Using different key for each route should force components to rebuild:

import React, { Component } from 'react';
import Navbar from './Components/Navbar';
import News from './Components/News';
import Test from './Components/Test';
import NoMatch from './Components/NoMatch';
import { BrowserRouter , Route, Routes } from 'react-router-dom'
export default class App extends Component {

render() {
return <div>
< Navbar />
<Route path="/" element={<News pageSize={8} key="1" category="sports"/>}/>

<Route key="ee-client" path="/business" element={<News key="2" pageSize={4} category="business"/>}/>

<Route key="eef-client" path="/entertainment" element={<News key="3" pageSize={2} category="entertainment"/>}/>

<Route key="evve-client" path="/general" element={<Test />}/>

<Route path="*" element={<NoMatch />} />


reference -

Leave a Comment

Your email address will not be published. Required fields are marked *