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