CODEWITHSUNDEEP
reactjsreact-router
Andres Mendez
Andres Mendez

Reputation: 21

Page 404 appears in all routes of React Router

I am trying to create the routes of my navbar and I am using React Router but I don't know what I am doing wrong because the 404 page appears in all the routes, even the home one, what could be wrong?

APP.JS :

import React from "react";
import Navbar from "./componentes/Navbar";
import './Estilos/EstilosGlobales.css'
import {ThemeProvider} from '@material-ui/core/styles'
import theme from './themeconfig'
import {BrowserRouter as Router,Switch,Route} from "react-router-dom";
import Inicio from "./Paginas/Inicio";
import FooterPage from "./componentes/FooterPage";
import AllCategorias from "./Paginas/AllCategorias.jsx"
import ErrorNoFount from "./Paginas/Error404";


function App() {
  return (
    <ThemeProvider theme={theme}>
      <Router>
        <Switch>
          <>
          <Navbar />
          <Route path="/" exact component={Inicio} />
          <Route path="/categorias" component={AllCategorias} />
          <Route path="*" component={ErrorNoFount} />
          <FooterPage />
          </>
        </Switch>
      </Router>
    </ThemeProvider>
  );
}

export default App;

enter image description here

As you can see, the two components come out of 404 and that of my home.

Upvotes: 1

Views: 1984

Answers (3)

JPDevM
JPDevM

Reputation: 121

maybe, you need anoter /

<Router>
 <>
  <Navbar />
    <Switch>
       <Route path="/" exact component={Inicio} />
       <Route exact path="/categorias" component={AllCategorias} />
       <Route path="/*" component={ErrorNoFount} />
       </Switch>
  <FooterPage />
 </>
</Router>

Upvotes: 0

Andres Mendez
Andres Mendez

Reputation: 21

Try this and solve the problem.

<Router>
 <>
  <Navbar />
    <Switch>
       <Route path="/" exact component={Inicio} />
       <Route exact path="/categorias" component={AllCategorias} />
       <Route path="*" component={ErrorNoFount} />
       </Switch>
  <FooterPage />
 </>
</Router>

the Switch tag should only contain the Route tags, there cannot be other components like children.

Upvotes: 0

Michael Abeln
Michael Abeln

Reputation: 2587

Remove the wildcard path match path="*" as that will apply the route to all pages. When you place a route with no path attribute below all other route statements it acts as a catch; basically, if no routes match show the 404.

from:

<Route path="*" component={ErrorNoFount} />

to:

<Route component={ErrorNoFount} />

Upvotes: 1

Related Questions