react-router-dom，组件不渲染，但仅<app>改为显示</app>

Question

应用程序.js：-

function App() {
  return (
    <BrowserRouter>
 
 <h1>App screen</h1>

    <Routes>
    <Route path="/projectDashboard"  component={ProjectScreen} ></Route>
    <Route  path="/" component={HomeScreen} ></Route>
    </Routes>


  </BrowserRouter>
  );

我得到的 Output：-

我只能看到 h1 标签。 路线不起作用。 每当我输入“localhost:3000/projectDashboard”时，它会自动更正并将我发送到“/”

我查看了其他答案并尝试设置确切的变量，但问题仍然存在。

Answer 1

在 RRDv6 Route组件中，将其组件在element prop 上渲染为 JSX ， component和render props 不再存在。

<Routes>
  <Route path="/projectDashboard" element={<ProjectScreen />} />
  <Route path="/" element={<HomeScreen />} />
</Routes>

参考路线和路线

interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactElement | null; index?: boolean; path?: string; }