React.js执行npm start后默认加载路由与配置不符如何解决

• 执行npm start启动项目后每次都会打开同一个页面，测试多个项目均出现相同现象
• 路由已配置根路径/精确重定向到/login，但实际默认打开地址为http://localhost:3000/login-auth
• 问题首次出现于安装firebase之后，即便当前项目未使用firebase、卸载firebase后问题依旧存在

路由配置代码 #

import { Redirect, Route, Switch } from "react-router-dom";
import { Page404 } from "./Page404";
import { Login } from "./Login";
import { Logout } from "./Logout";
import { Register } from "./Register";

export const Routing = () => {
return (
<div>
  <Switch>
    <Route path="/login" component={Login} />
    <Route path="/logout" component={Logout} />
    <Route path="/register" component={Register} />

    <Redirect exact from="/" to="/login" />
    <Route component={Page404} />
  </Switch>
</div>
);
};

补充说明 #

• 暂未开发首页组件，目前仅练习登录相关页面
• 包含路由配置的App组件代码如下：

import "./App.css";
import { Routing } from "./Components/Routing";
import "notyf/notyf.min.css";
import { BrowserRouter } from "react-router-dom";
import { MenuBar } from "./Components/MenuBar/MenuBar.jsx";

function App() {
return (
 <div className="App">
  <BrowserRouter>
    <header>
      <MenuBar />
    </header>
    <body>
      <Routing />
    </body>
  </BrowserRouter>
 </div>
 );
}

问题解决方案 #

根因是package.json中的homepage配置项异常导致跳转错误，修正该配置项即可恢复正常跳转逻辑。

内容的提问来源于stack exchange，提问作者Noam Dadon