反应组件不使用路线渲染

Question

我正在使用最新版本的React路由器。当我在组件中使用路线时，它们不会渲染任何内容，但是当我删除路线并简单地使用它们正常工作的组件时。无法理解出什么问题，

这是不起作用的，并且没有在“/”或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;

这是渲染且正常工作的。

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

这是因为，您不提供在路由中渲染的元素。必须像element = {＆lt;用户 /＆gt;} < /code>一样提及。因此，请尝试下面

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

基于文档，所有路由组件都应放置在嵌套在浏览器内的路由组件中。

另外，我注意到您每次都使用导航，即使您已经处于索引路径。我认为这可能会导致问题...

因此，考虑到这一点，将您的代码更改为

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

react-router-dom@6 route组件在element prop prop op a react> react node prop上呈现其内容，又称JSX，路由组件的唯一有效的孩子是另一个route组件的组件。 用户组件应移至元素 prop。

另外，要将重定向到默认路由，导航组件应 在通用路由上渲染。

解决方案

• 将用户组件移动到路由的元素 prop。
• 将导航组件移动到通用路由中，然后传递替换 prop，请发出重定向。

例子：

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