React Router BrowserRouter路由异常：输入/login跳转至Profile组件如何解决

嘿，这个问题我之前踩过坑！问题出在路由的匹配顺序和缺少Switch组件上，给你理清楚原因：

React Router的Route组件默认是从上到下依次匹配的，而且只要路径符合就会渲染对应的组件——你的代码里没用到Switch，所以当访问/login时，/login路由和/:username路由都会被匹配到（因为login会被当成username的参数值）。你看到Profile组件显示出来，大概率是因为它在DOM里的渲染顺序靠后，或者样式覆盖了Login组件。

修复方案 #

你只需要做两个关键调整：

• 导入并使用Switch组件：它会确保只渲染第一个匹配成功的路由
• 把具体的路由（比如/login）放在动态路由（/:username）的前面，让更明确的路径先被匹配

修改后的完整代码如下：

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

function App() {
  return (
    <BrowserRouter>
      <Switch> {/* 用Switch包裹所有Route */}
        <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}/> {/* 动态路由移到最后 */}
      </Switch>
    </BrowserRouter>
  );
}

export default App;

这样调整后，当你访问/login时，Switch会先匹配到/login的路由，直接渲染Login组件，不会再往下匹配/:username的路由啦！

内容的提问来源于stack exchange，提问作者J.Ko