React Js 导航，在新路由页面中重新呈现先前的组件

Question

Soo，我是 React js 框架的新手。我正在尝试进行导航 link。但是当它点击时，它会重新渲染之前的组件。下面的代码

  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;

我使用 route 和 routes 并且 link 它到一个组件，因为我认为它是一个“页面”。但是之前的组件仍然呈现在我导航的其他页面上（mappage 或 hompage）

这是主页

import React, { Component } from 'react';

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

export default Home;

Answer 1

首先，React是一个库，而不是一个框架。并且您的 Link 组件始终应该位于 Routes 组件的子级中。尝试在 Mappage 或 home 中使用 Link。它应该在那里工作

你的 FloorOne 组件应该是这样的

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>
        );
    }
}

你的Home组件可以是这样的

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;

Answer 2

在你的路线中使用 exact

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

React Js 导航，在新路由页面中重新呈现先前的组件

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

javascript

navigation

reactjs