React Router version 6

Question

React Router版本6出现问题。错误为未捕获错误：[PeopleContainer]不是组件。的所有组件子级必须是或<React.Fragment>

App.js组件

import './App.css';
import PeopleContainer from './PeopleContainer';
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import PeopleList from './PeopleList';
function App() {
return (
<div className="App">
<BrowserRouter>  
<Routes>
<Route path="/people"><PeopleContainer/></Route>
<Link to="/people">People</Link>
</Routes>
</BrowserRouter>  
</div>
);
}
export default App;

PeopleContainer.js
import React from 'react'
import Media from 'react-media'
import { Navigate, Route, Routes } from "react-router-dom";
import PeopleList from './PeopleList';
import Person from './Person';
import people from './people.json'
const PeopleContainer = () => {
return (
<Media queries={{
small: "(max-width: 700px)",
}}>
{ (size) => size. Small ? ( 
<Routes>
<Route path='/people/:id'> <Person/></Route>
<PeopleList/>
</Routes>  )
:   (
<div style={{display: 'flex'}}>
<PeopleList />
<Routes>
<Route path='/people/:id'><Person/></Route>
<Navigate to={`/people/${people[0].id}`}/>
</Routes>
</div>
)  
}
</Media>
)
}
export default PeopleContainer

PeopleList.js
import React from 'react';
import { NavLink } from 'react-router-dom';
import people from './people.json';
import './PeopleList.css'
const PeopleList = () => {
return (
<nav className='PeopleList' >
<ul>
{people. Map((person)=>(
<li key={`person-${person.id}`}>
<NavLink activeClassName ="currentPerson"
to={`/people/${person.id}`}>{person.name}</NavLink>   
</li>
))}
</ul>
</nav>
)
}
export default PeopleList

Person.js
import React from 'react';
import { useParams } from 'react-router-dom';
import people from './people.json';
import './Person.css';
const Person = () => {

const { id } = useParams();
const person = people.filter((p) => p.id === id)[0];
return ( 
<main className = "Person">
<h1>{person.name}</h1>
<label>ID:</label>
<div className='Person-id'>{id}</div>
<label>Address:</label>
<div className='Person-address'>{person.address}</div>
<label>Department:</label>
<div className='Person-department'>{person.department}</div>
</main>
)
}
export default Person

人员数据

[
{
"id": "58826508",
"name": "Kip Russel",
"address": "18627 Sporer MewsnMaximechesternSouth Dakotan04691",
"department": "Movies"
},
{
"id": "34033353",
"name": "Harrison Swift",
"address": "910 Lueilwitz LakenLake TroynWisconsinn25072",
"department": "Games"
},
{
"id": "28977789",
"name": "Carter Heaney",
"address": "1095 Johnny RidgenLynchstadnIowan81452-3853",
"department": "Clothing"
},
{
"id": "62734836",
"name": "Evert Conroy",
"address": "812 Dario DrivenMurrayvillenIllinoisn51582",
"department": "Games"
},
{
"id": "31034282",
"name": "Hoyt Kautzer",
"address": "398 Wunsch CoursenPort EdwardonMarylandn40326",
"department": "Jewelery"
},

{
"id": "43936107",
"name": "Miles Kerluke",
"address": "8620 Gerhold FordnRogahnburghnMississippin72312",
"department": "Shoes"
},
{
"id": "61453579",
"name": "Tiara Stoltenberg",
"address": "42719 Sally StreamnGeorgiannaportnOregonn51799-8713",
"department": "Beauty"
},

{
"id": "65974385",
"name": "Dovie Terry",
"address": "07231 Schamberger TurnpikenNew AugustinenNew Mexicon654
"department": "Books"
}]

我不知道我的代码发生了什么，因为我是反应路由器的新手。这是我从课本上抄的代码。我认为他们使用的是版本5

Answer 1

在React Router版本6中，您不能在<Routes>内部传递除<Route>或<React.Fragment>之外的子道具。在您的App.js组件中，使用此更改<Routes>...</Routes>部分

<BrowserRouter>  
<Routes>
<Route path="/people" element={<PeopleContainer/>} />
{/* <Link to="/people">People</Link> <--- remove this */}
</Routes>
</BrowserRouter>

并像上面一样在所有使用<Routes>的组件上更改<Routes>实现