React Router路由组件不渲染问题求助

你的问题出在路由的element属性传值方式错误。React Router v6要求Route的element属性必须传入已渲染的JSX元素，而不是直接传组件引用。

你当前的写法是直接传组件变量：

<Route exact="true" path='/' element={Kurt} />

正确的写法应该是把组件以JSX标签形式传入（加上<>）：

<Route path='/' element={<Kurt />} />

另外补充：React Router v6里Route已经不需要exact属性了，因为Routes组件会自动匹配最精确的路径，所以可以去掉exact="true"。

修改后的完整代码如下：

import { Route, NavLink, HashRouter, Routes } from "react-router-dom";
import Kurt from "./Kurt";
import Huff from "./Huff";
import Poe from "./Poe";

class Main extends Component {
  render() {
    return (
      <HashRouter>
        <div>
          <h1>My Favorite Authors</h1>
          <ul className='header'>
            <li>
              <NavLink to='/'>Kurt Vonnegut</NavLink>
            </li>
            <li>
              <NavLink to='/Huff'>Tanya Huff</NavLink>
            </li>
            <li>
              <NavLink to='/Poe'>Edgar Allan Poe</NavLink>
            </li>
          </ul>
          <div className='content'>
            <Routes>
              <Route path='/' element={<Kurt />} />
              <Route path='/Huff' element={<Huff />} />
              <Route path='/Poe' element={<Poe />} />
            </Routes>
          </div>
        </div>
      </HashRouter>
    );
  }
}

export default Main;

这样修改后，点击导航链接对应的组件内容就能正常显示了。

内容的提问来源于stack exchange，提问作者green_bean