CODEWITHSUNDEEP
reactjsreact-router
LearningReact
LearningReact

Reputation: 113

Redirect React always redirectin even when exact path

I'm trying to do a basic redirect Route But when I'm putting the redirect line it's always redirecting even if the path is right.

import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
import "./App.css";
import Search from "./pages/Search/Search";
import Term from "./pages/Term/Term";

function App() {
  return (
    <Router>
      <Route path='/' exact>
        <Search />
      </Route>
      <Route path='/term' exact>
        <Term />
      </Route>
      <Redirect to='/' />
    </Router>
  );
}

Upvotes: 0

Views: 380

Answers (1)

Domino987
Domino987

Reputation: 8774

You need to wrap the routes in a Switch so that not all but only first routes that matches is rendered. Or else, all the routes are rendered including the Redirect.

import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import "./App.css";
import Search from "./pages/Search/Search";
import Term from "./pages/Term/Term";

function App() {
  return (
    <Router>
      <Switch>
         <Route path='/' exact>
           <Search />
         </Route>
         <Route path='/term' exact>
            <Term />
         </Route>
         <Redirect to='/' />
       </Switch>
    </Router>
  );
}

Upvotes: 1

Related Questions