React.js: npm 开始显示不同的默认路由

Question

I'm new to react and I have a weird problem that every time I do npm start, I get on the same page?我是新手，我有一个奇怪的问题，每次我开始 npm 时，我都会进入同一页面？ how do I change it?我该如何改变它？ (tried with few projects! the same page!) （尝试了几个项目！同一页！）

routing:路由：

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>
);
};

and the default route that I always get is: http://localhost:3000/login-auth EVERY time after npm start.我总是得到的默认路由是：http://localhost:3000/login-auth npm 启动后的每次。

btw that started to happen when I installed firebase. in this project I'm not even using firebase and it keeps happening顺便说一句，当我安装 firebase 时开始发生。在这个项目中我什至没有使用 firebase 并且它一直在发生

Thanks!谢谢！

first edit I've noticed that I didn't mention important parts: first: I don't have a home component yet (wanted to practice log in pages) second: the app component: which contain the router {i needed the router that way because the header using it as well}第一次编辑我注意到我没有提到重要的部分：首先：我还没有主页组件（想练习登录页面）其次：应用程序组件：包含路由器{我需要路由器方式因为 header 也使用它}

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>
 );
}

I've tried to uninstall firebase (although I'm not using it in this project) and it did not work as well我尝试卸载 firebase（虽然我没有在这个项目中使用它）但它也没有用

** I SOLVED IT. ** 我解决了。 ** I had a "homepage" setting in my package.json that lead me there for some reason ** 我的 package.json 中有一个“主页”设置，出于某种原因将我带到那里

Answer 1

I'm confused, first of all why didnt you rap up your <Switch></Switch> in <Router/> tag?我很困惑，首先你为什么不在<Router/>标签中说出你的<Switch></Switch> ？

Mostly the router file structure is like this路由器文件结构大多是这样的

    import React from "react";
    import {
     BrowserRouter as Router,
     Switch,
     Route,
     Link
    } from "react-router-dom";

    export default function App() {
      return (
        <Router>
          <div>
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/users">Users</Link>
                </li>
              </ul>
            </nav>

        
           <Switch>
            <Route path="/about">
              <About />
            </Route>
            <Route path="/users">
               <Users />
            </Route>
            <Route path="/">
              <Home />
              </Route>
            </Switch>
          </div>
        </Router>
      );
    }

   function Home() {
     return <h2>Home</h2>;
   }

   function About() {
     return <h2>About</h2>;
   }

   function Users() {
     return <h2>Users</h2>;
   }

Answer 2

I think instead of http://localhost:3000/login-auth , you want to see http://localhost:3000 .我认为您不想看到 http:// http://localhost:3000/login-auth ，而是想看到http://localhost:3000 。 If that's the problem:如果那是问题所在：

It goes to login page because you have <Redirect exact from="/" to="/login" />它进入登录页面，因为你有<Redirect exact from="/" to="/login" />
Even if you delete this line, you will still face problems, because I cannot see your home component.即使你删除这一行，你仍然会遇到问题，因为我看不到你的主页组件。 Where is it?它在哪里？
And also you need to wrap your routing with <Router> and <Switch> tags as ASWIN CHANDRON noted.正如 ASWIN CHANDRON 指出的那样，您还需要使用<Router>和<Switch>标签包装您的路由。
Also, I kindly advise you to update your knowledge to new React syntax.另外，我建议您将知识更新到新的 React 语法。 And to use exact keyword.并使用exact关键字。 So, instead of <Route path="/login" component={Login} /> use <Route exact path="/login"><Login /></Route>因此，不要使用<Route path="/login" component={Login} />使用<Route exact path="/login"><Login /></Route>

And also instead of import { Login } from "./Login";而且import { Login } from "./Login"; you can type import Login from "./Login";你可以输入import Login from "./Login";

Answer 3

I've solved it, the problem was in the package.json, i had "homepage" option and it just throw me there after npm start我已经解决了，问题出在 package.json，我有“主页”选项，它只是在 npm 开始后把我扔到那里

React.js: npm 开始显示不同的默认路由

问题描述

3 个解决方案

解决方案1
0 2021-09-26 10:47:47

解决方案2
0 2021-09-26 12:21:30

解决方案3
0 2021-09-28 18:10:00

React.js: npm 开始显示不同的默认路由

问题描述

3 个解决方案

解决方案1 0 2021-09-26 10:47:47

解决方案2 0 2021-09-26 12:21:30

解决方案3 0 2021-09-28 18:10:00

解决方案1
0 2021-09-26 10:47:47

解决方案2
0 2021-09-26 12:21:30

解决方案3
0 2021-09-28 18:10:00