反应组件不使用路由渲染

Question

I am using the latest version of react router. When I am using routes in my component, They are not rendering anything but When I remove the routes and use simply the component they are working fine. Not able to understand what is going wrong

This do not work and is not rendering anything on "/" or http://localhost:3000/

import React from "react";
import { BrowserRouter as Router, Route, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";

function App() {
  return (
    <Router>
      <Route path="/" exact>
        <Users />
      </Route>
      <Navigate to="/" />
    </Router>
  );
}

export default App;

This is rendering and working fine.

import React from "react";
import { BrowserRouter as Router, Route, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";

function App() {
  return <Users />;
}

export default App;

Answer 1

 import React, {useState} from "react"; import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"; import Users from "./user/pages/Users"; import Profiles from "./Profiles" // this is dummy function App() { const [state, setState] = useState(false) return ( <Router> <Routes> <Route path="/" element={<Users />}/> <Route path="/profiles" element={state ? <Profiles /> : <Navigate to="/" />} /> {/* so you redirect only if your state is false */} </Routes> </Router> ); } export default App;

Answer 2

It is because, You din't provide which element to render in Route . It has to be mentioned like element={<Users />} . So try like below,

import React from "react";
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
import Users from "./user/pages/Users";

function App() {
  return (
    <Router>
     <Routes>
      <Route path="/" element={<Users />} />
      <Navigate to="/" />
     </Routes>
    </Router>
  );
}

export default App;

Answer 3

Based on the docs, all Route components should be placed inside a Routes component, which is nested inside the BrowserRouter.

Also, I noticed you use Navigate everytime, even when you are already at the index path. I think this may cause a problem...

So, with that in mind, Change your code to

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Users from "./user/pages/Users";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/">
          <Route index element={<Users />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

Answer 4

Issue

In react-router-dom@6 the Route component renders its content on the element prop as a ReactNode , aka JSX, the only valid child of the Route component is another Route component for the case of nesting routes. The Users component should be moved to the element prop.

Also, to render a redirect to a default route, the Navigate component should also be rendered on a generic route.

Solution

• Move Users component onto route's element prop.
• Move the Navigate component into a generic route and pass the replace prop so issue a redirect.

Example:

function App() {
  return (
    <Router>
      <Route path="/" element={<Users />} />
      <Route path="*" element={<Navigate to="/" replace />} />
    </Router>
  );
}