React route is not working | React Router-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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>
  );
}