CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Arosha
Arosha

Reputation: 541

React route is not working | React Router

I install npm install react-router-dom@6 and set route path..

import React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import "./App.css";
import HeaderBar from "./components/HeaderBar/HeaderBar";
import SignIn from "./components/SignIn/SignIn";
import SignUp from "./components/SignUp/SignUp";

function App() {
  return (
    <div>
      <BrowserRouter>
        <HeaderBar />
        <Route path="/">
          <SignIn />
        </Route>
        <Route path="/signup">
          <SignUp />
        </Route>
      </BrowserRouter>
    </div>
  );
}

export default App;

The preview is not working. Didn't see any error. Why it is..? Please help me.

Upvotes: 5

Views: 36486

Answers (4)

Drew Reese
Drew Reese

Reputation: 202605

The only thing I can see as "not working" is that both routes will match and be rendered with the path is "/signup". The router components inclusively render all matching Route and Redirect components.

You likely want to wrap the routes in a Switch component so the routes are exclusively matched and rendered.

Switch

Renders the first child <Route> or <Redirect> that matches the location.

Keep in mind also that within the Switch component that path order and specificity matters. You will want to order the paths from more specific paths to less specific paths. "/" is about as general as it gets, so should be rendered after the more specific "/signup" path.

import { BrowserRouter, Switch, Route } from "react-router-dom";

function App() {
  return (
    <div>
      <BrowserRouter>
        <HeaderBar />
        <Switch>
          <Route path="/signup">
            <SignUp />
          </Route>
          <Route path="/">
            <SignIn />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

If the issue is that you've installed react-router-dom version 6 and you are working from an outdated tutorial, then replace the Switch component for the required Routes component and render the routed components on the Route component's element prop as JSX.

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <div>
      <BrowserRouter>
        <HeaderBar />
        <Routes>
          <Route path="/signup" element={<SignUp />} />
          <Route path="/" element={<SignIn />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

Upvotes: 2

Dharmik Patel
Dharmik Patel

Reputation: 1201

New version 6 of React router had some major changes. so if you want your code to work then do as below. You have to wrap your all of your routes in routes tag like below.

<BrowserRouter>
     <Routes>
         <Route path='/signin' element={<SignIn />} />
         <Route path='/signup' element={<SignUp />}  />
     </Routes>
</BrowserRouter>

And one more thing their shouldn't be anything in Routes tag except Route tags.

Upvotes: 3

Shambhu Sahu
Shambhu Sahu

Reputation: 341

I don't why you are not getting the error but I have added the working code you can try it

import React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Routes } from "react-router-dom";
import "./App.css";
import HeaderBar from "./components/HeaderBar/HeaderBar";
import SignIn from "./components/SignIn/SignIn";
import SignUp from "./components/SignUp/SignUp";

function App() {
  return (
    <div>
      <BrowserRouter>
        <HeaderBar />
        <Routes>
          <Route path="/" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />}/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

You can use Route inside the Routes and pass your component inside the element

Upvotes: 2

user18332436
user18332436

Reputation:

You need to use Routes rather than Switch for react-router-dom@6. Something like this:

<BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
      </Route>
    </Routes>
  </BrowserRouter>

Upvotes: 9

Related Questions