reactjs - React Route 显示空白页

Question

我有一个问题，我是新手，我正在尝试使用 React Router，但每当我使用它时它都会显示一个空白页面这是我的代码:

    import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
class TodoApp extends Component{
    render() {
      return (
        <div className="TodoApp">
            <Router>
                <>
                <Route path="/" element={<WelcomeComponent />} />
                </>
            </Router>
        </div>
      )
    } 
}


class WelcomeComponent extends Component{
    render()
    {
        return <div>
            abcd
        </div>
    }
}

如果我删除路线相反，我写了一些其他代码工作正常，所以我知道我的路线有问题，我不确定它是什么

Answer 1

路线只能是路线的 child 。尝试像下面这样将路由添加为父路由，您应该会看到欢迎组件正在加载。

render() {
    return (
      <div className="TodoApp">
        <Router>
          <Routes>
            <Route path="/" element={<WelcomeComponent />} />
          </Routes>
        </Router>
      </div>
    );
  }