Warum reagiert die Anzeige aller meiner Komponenten gleichzeitig?

Question

Ich habe eine einfache App:

import React from 'react'; 
import { render } from 'react-dom'; 
import { BrowserRouter, Route } from 'react-router-dom'; 

import './css/hind.css'; 
import './css/splash.css'; 

import Feedback from './components/Feedback'; 
import NotFound from './components/NotFound'; 

render((
    <BrowserRouter> 
    <div className="add-100 dark-background"> 
     <Route path="/" exact={true} component={Feedback}/> 
     <Route path="*" component={NotFound}/> 
    </div> 
    </BrowserRouter> 
), document.getElementById('app')); 

Und ich würde erwarten, dass / bei der URL würde ich die erste Komponente sehen, und zu jeder anderen URL, würde ich die zweite sehen. Der NotFound Teil zeigt an, wie ich es auch erwarten würde, aber bei / sehe ich die erste Komponente, dann die zweite Komponente, die darunter angezeigt wird. NotFound ist definitiv nicht in meiner Feedback Datei. Wie verwende ich den Router richtig, so dass ich nur die Komponente anzeigen, die ich will?

Answer 1

Wickeln Sie Ihre Routen mit <Switch />.

import React from 'react'; 
import { render } from 'react-dom'; 
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

import './css/hind.css'; 
import './css/splash.css'; 

import Feedback from './components/Feedback'; 
import NotFound from './components/NotFound'; 

render((
    <BrowserRouter> 
    <div className="add-100 dark-background"> 
     <Switch> 
      <Route path="/" exact={true} component={Feedback}/> 
      <Route path="*" component={NotFound}/> 
     </Switch> 
    </div> 
    </BrowserRouter> 
), document.getElementById('app')); 

Was macht <Switch /> genau?

Es rendert das erste Kind <Route> oder <Redirect>, die dem Standort entspricht.

source

Answer 2

path="*" wird in RRv4 nicht wirklich unterstützt. Stattdessen wird eine Route ohne Pfadeigenschaft immer übereinstimmen. Wenn Sie das Wissen mit der Komponente Switch kombinieren, erhalten Sie das gewünschte Ergebnis. Switch wird nur die erste übereinstimmende Route, so ist die Idee, dass, wenn keine Ihrer anderen Route s übereinstimmen, dann wird die letzte Route in Ihrer Switch Komponente rendern.

<Switch> 
     <Route path="/" exact={true} component={Feedback}/> 
     <Route component={NotFound}/> 
    </Switch>