reactjs/react-router-dom: Browserrouter 路由问题

Question

这可能是一个非常简单的问题，但我无法通过搜索找到答案。

我正在使用 ReactJs 编写一个应用程序，并且正在使用 react-router-dom 的浏览器路由器进行路由。

当我输入 '/login' 作为 URL 时，下面的代码将返回 Profile 组件，而不是预期的 Login 组件。如何确保这将按预期登陆到 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>