当我从 "react-router-dom" 调用路由器时，我的页面变为空白。我做错了什么？

Question

这是我运行

的App.js文件

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';
import HomePage from './pages/HomePage';
import './App.css';


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" component={HomePage} exact />
        </div>
      </Router>
    );
  }
}
  


export default App;

我一直收到一个空白文件，但如果我注释掉路由器，它就会显示

Answer 1

在 react-router-dom@6 中，您应该将 Route 组件包装在处理路由路径匹配和渲染的必需 Routes 组件中。 Route 组件 API 也发生了一些变化，现在只有一个 element 属性需要 ReactNode、a.k.a。 JSX，呈现路由内容。

示例：

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from 'react-router-dom';
import HomePage from './pages/HomePage';
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Routes>
            <Route path="/" element={<HomePage />} />
          </Routes>
        </div>
      </Router>
    );
  }
}

有关 RRD v5 和 v6 之间差异的更完整指南，请查看 migration guide。

OFC，如果您想保留现有代码，您可以可以恢复到react-router-dom@5。

npm uninstall -s react-router-dom
npm install -s react-router-dom@5

当我从 "react-router-dom" 调用路由器时，我的页面变为空白。我做错了什么？

My page goes blank when I call Router from "react-router-dom". What did I do wrong?

reactjs

react-router