React Router Dom 没有呈现我的页面

Question

我正在尝试学习 React，但我受困于 React render dom，它不想呈现我的页面。

我的App.js

import React from 'react';
import { Route } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';

function App() {
  return (
    <div>
      <Route exact path='/' component={ HomePage }/>
    </div>
  );
}

export default App;

还有我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Answer 1

React Router v6 不再支持精确匹配，因为默认情况下所有路径都是完全匹配的。并且 component 在 v6 中更改为 element。您还需要从 react-router-dom 导入 Routes。最后，主页必须是 <HomePage/>

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';

function App() {
  return (
    <Routes>
      <Route path='/' element={ <HomePage/> }/>
    </Routes>
  );
}

export default App;

React Router Dom 没有呈现我的页面

React Router Dom isn't rendering my pages

reactjs

react-router-dom