ReactJs導航，在新路由頁面中重新渲染以前的組件

Soo，我是 react js 框架的新手。我正在嘗試制作導航鏈接。但是當它點擊時，它會重新渲染上一個組件。下面的代碼

  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;

我使用路由和路由并將其鏈接到一個組件，因為我認為它是一個“頁面”。但前一個組件仍呈現在我導航的其他頁面（映射頁或主頁）的頁面上

這是主頁

import React, { Component } from 'react';

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

export default Home;

uj5u.com熱心網友回復：

首先，React 是一個庫，而不是一個框架。并且您的Link組件應該始終位于組件的子Routes組件中。嘗試使用LinkinMappage或home. 它應該在那里作業

您的 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;

uj5u.com熱心網友回復：

在您的路線中使用精確

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

標籤：javascript 反应 导航

上一篇：在Javascript中構建JSON檔案-附加資料中的問題

下一篇：如何獲取范圍數或未定義的輸入值中的第一個數字