REACTコンポーネントがページに固執していますか？

Question

ホームページと他の2つのページを持つ単一のページアプリケーションを作成しようとしています。問題は、反応ルータのリンクをクリックするとホームページが「消えない」ことです。新しいコンポーネントは既存のコンポーネントSee component rendered beneath the other componentの下にレンダリングされます。

リンクされた2つのコンポーネントは、期待どおりに機能します。適切なリンクをクリックすると、どちらか一方が置き換えられます。しかし、1）レンダリングされる前に空白を作成します。2）ホームコンポーネントを「置き換える」ことはありません。

ページを切り替えるときにホームコンポーネントを「非表示にする」方法を教えてください。ここに私のコード：

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import Basics from './Basics'; 
import registerServiceWorker from './registerServiceWorker'; 
import './index.css'; 
import { BrowserRouter as Router, Route } from "react-router-dom"; 
import Home from './Home'; 


ReactDOM.render(
    <Router> 
    <div> 
     <Route path="/" component={Home}></Route> 
     <Route path="/basics" component={Basics}></Route> 
     <Route path="/flies" component={Flies}></Route> 
    </div> 
    </Router>, document.getElementById('root')); 

registerServiceWorker(); 

Answer 1

回答が見つかりました。明らかに<Router>の<div>を<Switch>に置き換えると、各コンポーネントを1つずつ排他的にレンダリングすることができます。

<Router> 
    <Switch> 
     <Route path="/" component={Home}></Route> 
     <Route path="/basics" component={Basics}></Route> 
     <Route path="/flies" component={Flies}></Route> 
    </Switch> 
    </Router>, document.getElementById('root')); 

Answer 2

これには2つの解決策があります。

は、そう

<Route exact path="/" component={Home} /> 

または、これらのRoute sがSwitchコンポーネント内にある必要があります

<Route path="/basics" component={Basics} /> 
<Route path="/flies" component={Flies} /> 
<Route path="/" component={Home} /> 

リストの最後であることを/Routeを動かすように、exactであるためにあなたの/を変更

react-routerから入手できます。