реагировать / реагировать-маршрутизатор-дом: вопрос маршрутизации Browserrouter

Question

это, вероятно, очень простая проблема, но я не могу найти ответ из своего поиска.

Я пишу приложение с использованием ReactJs и использую browserrouter реагировать на маршрутизатор-dom для маршрутизации.

Когда я ввожу '/ login' в качестве URL-адреса, приведенный ниже код вернет компонент Profile, а не предполагаемый компонент Login. Как я могу гарантировать, что это попадет на компонент входа в систему, как предполагалось?

import React from 'react';
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./routes/Home";
import Profile from "./routes/Profile";
import Post from "./routes/Post"
import Login from "./routes/Login"

function App() {
  return (
    <BrowserRouter>
        <Route path="/" exact={true} component={Home}/>
        <Route path="/login" exact={true} component={Login}/>
        <Route path="/r/:postid" exact={true} component={Post}/>
        <Route path="/:username" exact={true} component={Profile}/>
    </BrowserRouter>
  );
}

export default App; 

Answer 1

Вместо этого можно использовать Switch, так как он отображает первого дочернего элемента <Route> или <Redirect>, который соответствует местоположению.

Пример:

<BrowserRouter>
    <Switch>
        <Route path="/" exact={true} component={Home}/>
        <Route path="/login" exact={true} component={Login}/> 
    </Switch>
</BrowserRouter>