DEV Community

loading...
Cover image for Exact path in react-router

Exact path in react-router

Aastha Pandey
I write only on those topics, wherein I myself was stuck at some point in time.
・1 min read

When I was using react router for the first time I used path instead of exact path as props in component.

<Router>
  <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
Enter fullscreen mode Exit fullscreen mode

In the above code when one replaces exact path to path it will match every path starting with '/', since the is inside the so, it will match the first path and don't check for the other matches.
The above code after removing exact from the will always show component and ignore or .

If one doesn't want to use exact path then the below code will work

<Router>
  <Switch>
     <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
         <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)