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

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

Answer 1

路由只能是路由的子路由。尝试像下面这样将路由添加为父路由，您应该会看到 WelcomeComponent 正在加载。

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

Answer 2

当渲染超过一行代码时，您的 return 需要将它们括在括号中。您的 WelcomeComponent 应如下所示

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

}

React Route 显示空白页

React Route shows blank page

routes

reactjs

react-router

react-router-dom