React 路由不接受组件

Question

我写了一段代码来在用户转到某个路径时显示一些组件，在这种情况下，当用户转到“/”路径时，它应该 return 一个 Header 和 Home 组件，但是我得到这些错误：

错误：

uncaught Error: [Header] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (router.ts:5:1)
    at components.tsx:291:1
    at react.development.js:1195:1
    at react.development.js:1158:1
    at mapIntoArray (react.development.js:1049:1)
    at mapIntoArray (react.development.js:1099:1)
    at mapChildren (react.development.js:1157:1)
    at Object.forEachChildren [as forEach] (react.development.js:1194:1)
    at createRoutesFromChildren (components.tsx:275:1)
    at components.tsx:306:1
invariant @ router.ts:5
(anonymous) @ components.tsx:291
(anonymous) @ react.development.js:1195
(anonymous) @ react.development.js:1158
mapIntoArray @ react.development.js:1049
mapIntoArray @ react.development.js:1099
mapChildren @ react.development.js:1157
forEachChildren @ react.development.js:1194
createRoutesFromChildren @ components.tsx:275
(anonymous) @ components.tsx:306
(anonymous) @ react.development.js:1195
(anonymous) @ react.development.js:1158
mapIntoArray @ react.development.js:1049
mapChildren @ react.development.js:1157
forEachChildren @ react.development.js:1194
createRoutesFromChildren @ components.tsx:275
Routes @ components.tsx:256
renderWithHooks @ react-dom.development.js:16141
mountIndeterminateComponent @ react-dom.development.js:20838
beginWork @ react-dom.development.js:22342
callCallback @ react-dom.development.js:4157
invokeGuardedCallbackDev @ react-dom.development.js:4206
invokeGuardedCallback @ react-dom.development.js:4270
beginWork @ react-dom.development.js:27243
performUnitOfWork @ react-dom.development.js:26392
workLoopSync @ react-dom.development.js:26303
renderRootSync @ react-dom.development.js:26271
performConcurrentWorkOnRoot @ react-dom.development.js:25577
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
router.ts:5 Uncaught Error: [Header] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (router.ts:5:1)
    at components.tsx:291:1
    at react.development.js:1195:1
    at react.development.js:1158:1
    at mapIntoArray (react.development.js:1049:1)
    at mapIntoArray (react.development.js:1099:1)
    at mapChildren (react.development.js:1157:1)
    at Object.forEachChildren [as forEach] (react.development.js:1194:1)
    at createRoutesFromChildren (components.tsx:275:1)
    at components.tsx:306:1
invariant @ router.ts:5
(anonymous) @ components.tsx:291
(anonymous) @ react.development.js:1195
(anonymous) @ react.development.js:1158
mapIntoArray @ react.development.js:1049
mapIntoArray @ react.development.js:1099
mapChildren @ react.development.js:1157
forEachChildren @ react.development.js:1194
createRoutesFromChildren @ components.tsx:275
(anonymous) @ components.tsx:306
(anonymous) @ react.development.js:1195
(anonymous) @ react.development.js:1158
mapIntoArray @ react.development.js:1049
mapChildren @ react.development.js:1157
forEachChildren @ react.development.js:1194
createRoutesFromChildren @ components.tsx:275
Routes @ components.tsx:256
renderWithHooks @ react-dom.development.js:16141
mountIndeterminateComponent @ react-dom.development.js:20838
beginWork @ react-dom.development.js:22342
callCallback @ react-dom.development.js:4157
invokeGuardedCallbackDev @ react-dom.development.js:4206
invokeGuardedCallback @ react-dom.development.js:4270
beginWork @ react-dom.development.js:27243
performUnitOfWork @ react-dom.development.js:26392
workLoopSync @ react-dom.development.js:26303
renderRootSync @ react-dom.development.js:26271
recoverFromConcurrentError @ react-dom.development.js:25689
performConcurrentWorkOnRoot @ react-dom.development.js:25589
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 2 more frames
react-dom.development.js:18525 The above error occurred in the <Routes> component:

    at Routes (http://localhost:3000/static/js/bundle.js:49707:5)
    at Router (http://localhost:3000/static/js/bundle.js:49640:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:48449:5)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18525
update.callback @ react-dom.development.js:18558
callCallback @ react-dom.development.js:13092
commitUpdateQueue @ react-dom.development.js:13113
commitLayoutEffectOnFiber @ react-dom.development.js:23204
commitLayoutMountEffects_complete @ react-dom.development.js:24461
commitLayoutEffects_begin @ react-dom.development.js:24447
commitLayoutEffects @ react-dom.development.js:24385
commitRootImpl @ react-dom.development.js:26651
commitRoot @ react-dom.development.js:26517
finishConcurrentRender @ react-dom.development.js:25731
performConcurrentWorkOnRoot @ react-dom.development.js:25648
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
router.ts:5 Uncaught Error: [Header] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (router.ts:5:1)
    at components.tsx:291:1
    at react.development.js:1195:1
    at react.development.js:1158:1
    at mapIntoArray (react.development.js:1049:1)
    at mapIntoArray (react.development.js:1099:1)
    at mapChildren (react.development.js:1157:1)
    at Object.forEachChildren [as forEach] (react.development.js:1194:1)
    at createRoutesFromChildren (components.tsx:275:1)
    at components.tsx:306:1

这是我的 App.js 源代码：

import './App.css';
import Header from './Main__components/Header';
import Home from './Main__components/Home';
import {BrowserRouter as Router , Routes, Route} from "react-router-dom"
import React from 'react';

function App() {
  return (
    <div className="App">
      <Router>
       <Routes>
         <Route path='/'>
            <Header />
            <Home />
            
         </Route>
       </Routes>
      </Router>


    </div>
  );
}

export default App;

我花了好几个小时试图解决这个问题，老实说，我没有更多的想法有什么想法吗？

Answer 1

其他 Route 组件是 Route 组件的唯一有效子组件。在 element 属性上呈现所有路由内容。

示例：

<Router>
  <Routes>
    <Route
      path='/'
      element={(
        <>
          <Header />
          <Home />
        </>
      )}
    />
  </Routes>
</Router>

如果你想用多个路由渲染 Header 组件，那么使用所谓的 layout route 来渲染 Header 组件以及 Outlet要渲染到的嵌套路由。

示例：

import { Outlet } from 'react-router-dom';

const HeaderLayout = () => (
  <>
    <Header />
    <Outlet />
  </>
);

...

<Router>
  <Routes>
    <Route element={<HeaderLayout />}>
      <Route path='/' element={<Header />} />
      ... other routes with header
    </Route>
    ... routes w/o header
  </Routes>
</Router>

Answer 2

您在路线中设置的元素有误。你需要这样做：

<Routes>
        <Route exact path='/' element={<HomeAndHeader/>}/>
</Routes>

另外别忘了你不能在这里放置多个元素，所以你需要将它们包围在一个组件中。您可以使用片段或仅创建一个包含它们的单个组件来完成此操作。

React 路由不接受组件

React routes does't accept the components

javascript

reactjs

react-router

react-router-dom