带路由的组件

Question

我需要在 CountriesHoc 中执行一些功能，但我的代码不起作用。谁能解释一下为什么？

没用

应用程序

<Routes>
  <Route path='countries'>
    <CountriesHoc/>
  </Route>
</Routes>

国家/地区

<>
  <Route path='known' element={<CountriesPage filteredArray={learnedCountries}/>}/>
  <Route path='unknown' element={<CountriesPage filteredArray={notLearnedCountries}/>}/>
  <Route path='all' element={<CountriesPage filteredArray={allCountries}/>}/>
</>

错误：

============================================= ====================================

有效

应用程序

<Routes>
  <Route path='countries'>
    <Route path='known' element={<CountriesPage filteredArray={learnedCountries}/>}/>
    <Route path='unknown' element={<CountriesPage filteredArray={notLearnedCountries}/>}/>
    <Route path='all' element={<CountriesPage filteredArray={allCountries}/>}/>
  </Route>
</Routes>

Answer 1

将您的代码更改为将您的路线包装在 Router-dom

的路线组件内

<Routes>
  <Route path='known' element={<CountriesPage filteredArray={learnedCountries}/>}/>
  <Route path='unknown' element={<CountriesPage filteredArray= 
  {notLearnedCountries}/>}/>
  <Route path='all' element={<CountriesPage filteredArray={allCountries}/>}/>
<Routes/>

并将父级更改为

<Routes>
  <Route path='countries/*' element={<CountriesHoc/>}/>
</Routes>

您还可以在子组件的第一个路由上添加一个 index 布尔值属性，以获得显示的默认组件，请注意它应该没有路径属性

UPD: 添加了'/*'

Answer 2

路线包含组件道具

这将渲染需要显示的组件

应用程序

<Routes>
  <Route path='countries' component={CountriesHoc}/>
</Routes>

或

<Routes> 
 <Route path='countries' component={<CountriesHoc/>}/> 
</Routes>

Answer 3

import { Route, BrowserRouter, Routes } from "react-router-dom";
import { Home} from './Pages'


<BrowserRouter>
        <Routes> 
              <Route path="/" element={<Home />} /> 
        </Routes>
</BrowserRouter>

带路由的组件

Component with routes

reactjs

react-router