Router path not functioning properly?

Question

For some reason my Router isn't working properly. The first Route path above the Switch is working but the two below it aren't. When I try to follow that path on the browser it wont work. I've been looking for a while on the internet, so you guys are my last hope. I checked all path files and still no luck.

Thanks

heres the code

import React  from 'react';
import Navbar from './Components/profileLayout/Navbar';
import Home from './Components/profileLayout/Home';
import './App.css';
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'
import SignIn from './Components/profileLayout/SignIn';
import Register from './Components/profileLayout/Register';

class App extends React.Component {

  render() {
    return (
      <Router>
        <div className="App">
          <Navbar />
          <Home />
          <Route path='/' exact component={Home} />
            <Switch>
              <Route  path="/register" exact component={Register} />
              <Route  path="/signin"  exact component={SignIn} />
            </Switch>

        </div>
      </Router>
    );
  }
}


export default App;

If your route has home rendered on "/" then why are you rendering it below . Plus your route with path "/" should be inside switch, so it can switch between routes based on location. — mav-raj, Nov 20 '19 at 03:23

score 2 · Answer 1 · answered Nov 20 '19 at 01:15

2

Put them all inside the switch component.

<Switch>
   <Route path='/' exact component={Home} />
   <Route  path="/register" exact component={Register} />
   <Route  path="/signin"  exact component={SignIn} />
</Switch>

answered Nov 20 '19 at 01:15

Gerard Segismundo

45
7

score 1 · Accepted Answer · answered Nov 20 '19 at 03:31

Change your Route like this way. Keep all your Route inside the Switch and remove the <Home/> after <NavBar/> as it is already going to be appear once page loaded with '/' path

  <Router>
    <div className="App">
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home} />
        <Route  path="/register" exact component={Register} />
        <Route  path="/signin"  exact component={SignIn} />
      </Switch>
    </div>
  </Router>

Router path not functioning properly?

2 Answers2