React.js: npm start shows a different default route-CodePudding

I'm new to react and I have a weird problem that every time I do npm start, I get on the same page! 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.

btw that started to happen when I installed firebase. in this project I'm not even using firebase and it keeps happening

Thanks!

CodePudding user response：

I'm confused, first of all why didnt you rap up your <Switch></Switch> in <Router/> tag?

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

CodePudding user response：

I think instead of http://localhost:3000/login-auth, you want to see http://localhost:3000. If that's the problem:

It goes to login page because you have <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.
Also, I kindly advise you to update your knowledge to new React syntax. And to use exact keyword. So, instead of <Route path="/login" component={Login} /> use <Route exact path="/login"><Login /></Route>

And also instead of import { Login } from "./Login"; you can type import Login from "./Login";