在路由路径中添加反应组件会抛出错误

Question

在 App.js 中的路由路径中添加组件时，出现以下错误。知道为什么会这样吗？

router.ts:5 未捕获错误：[AboutUs] 不是组件。的所有子组件必须是 a 或在不变量 (router.ts:5:1) 在 components.tsx:291:1 在 react.development.js:1195:1 在 react.development.js:1158:1 在 mapIntoArray (react.development.js:104

import React, { useState } from 'react';
import { BrowserRouter, Route, Routes, Switch} from "react-router-dom";
import Navigation from './components/navigation';
import AboutUs from "./components/aboutUs";
import Team from "./components/team";

function App() {
  return (
    <BrowserRouter>
    <Navigation />
        <Routes>
          <Route path="/">
          <AboutUs />
          </Route>
          <Route exact path="/team">
          <Team />
          </Route>
        </Routes>
    </BrowserRouter>
  );
}
export default App;

//aboutUs.js

import React from "react";
const AboutUs = () => {

    return (
        <div className="aboutUs">
             <p>About us Page</p>
        </div>
    )

}
export default AboutUs;

//team.js

import React from "react";
const Team = () => {

    return (
        <div className="team">
             <p>Team Page</p>
        </div>
    )

}
export default Team;

//navigation.js

import React from 'react';
import { NavLink} from 'react-router-dom';

const Navigation = () => {

    return (
        <div className="App">
            <div className="wrapper">
                <div id="wrap">
                    <nav className="siteNavigation_nav_links">
                        <div className="main_links_nav">
                           <div className="navigationpanel">
                                <NavLink className="mob_link" to="/">About Us</NavLink>
                                <NavLink className="mob_link" to="/team">Team</NavLink>
                           </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    )
}

export default Navigation;

Answer 1

错误，因为您使用了错误版本的 react-router-dom。

// React router v4 or v5
<Route path="/" component={Component} /> 

// React router v5.1
<Route exact path="/">
<Component />
</Route>

// React router v6
<Route path="/" element={<Component />} />

在路由路径中添加反应组件会抛出错误

Adding react components in route path is throwing error

reactjs

react-router-dom