React Js navigation, re-render previous component in new routed page-CodePudding

Soo, im new on react js framework. im trying to make an navigation link. but when it clicked, it re-render the previous component . codes below

  import React, { Component } from 'react';
import {Card, Button , ListGroup }  from 'react-bootstrap'
import { Route, Link, BrowserRouter,Routes } from 'react-router-dom'
import Mappage from '../mapPage';
import Home from '../home';
import 'bootstrap/dist/css/bootstrap.min.css';
class FloorOne extends Component {
    state = { 
     }  
    render() { 
    //   const floors = [1,2,3,4,5,6,7];
        return (
           <BrowserRouter>
            <div className='cardContainer'>
            <ListGroup as ="ul" className='floorCard'>
         
                <ListGroup.Item as ="li">
            
                   <Link to="/mapPage"> link to map</Link>
               
                </ListGroup.Item>
                <ListGroup.Item as ="li">
                    <Link to="/home"> buttom home</Link>
                </ListGroup.Item>
                <Routes >
                          <Route path="/mapPage" element={ <Mappage/>}/>
                          <Route path="/home" element={<Home/>}/>
                </Routes>
              </ListGroup>
            </div>
             </BrowserRouter>
        );
    }
}
export default FloorOne;

i use route and routes and link it to a component as i thought its a "page". but the previous component still renderd on the page other page that i navigate (either mappage or hompage)

this is homepage

import React, { Component } from 'react';

function Home() {
    return <div>
       <h1>this is homepage</h1>
    </div>
    ;
}

export default Home;

CodePudding user response：

Use exact in your Route

    <Routes>
        <Route exact path="/mapPage" element={ <Mappage/>}/>
        <Route exact path="/home" element={<Home/>}/>
   </Routes>

CodePudding user response：

First of all, React is a library, not a framework. And your Link components always should be in the children of Routes component. Try using Link in Mappage or home. There it should work

Your FloorOne Component should be like this

import React, { Component } from 'react';
import { Route, Link, BrowserRouter,Routes } from 'react-router-dom'
import Mappage from '../mapPage';
import Home from '../home';
import 'bootstrap/dist/css/bootstrap.min.css';

class FloorOne extends Component {
    state = { }  
    render() { 
    //   const floors = [1,2,3,4,5,6,7];
        return (
           <BrowserRouter>
              <Routes >
                 <Route path="/mapPage" element={<Mappage />}/>
                 <Route path="/home" element={<Home />}/>
              </Routes>
           </BrowserRouter>
        );
    }
}

Your Home Component can be like this

import React, { Component } from 'react';
import { Card, Button , ListGroup }  from 'react-bootstrap';
import { Link } from 'react-router-dom'


function Home() {
    return (
.     <div>
        <ListGroup as="ul" className='floorCard'>       
           <ListGroup.Item as="li">        
               <Link to="/mapPage"> link to map</Link>             
           </ListGroup.Item>
           <ListGroup.Item as="li">
               <Link to="/home"> buttom home</Link>
           </ListGroup.Item>              
        </ListGroup>       
      </div>
  );
}

export default Home;