<Routes> 不会渲染充当多个 <Route>

Question

我希望标题是可以理解的。

所以问题是，当我将

Component

包裹在

<Routes>

中时，我收到此警告。

警告：

[Categories] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

我的应用程序.js

const App = () => {
   return (
        <div className="app__container">
            <Header />
            <Nav />
            <BrowserRouter>
                <Routes>
                    {/* This two component get warning */}
                    <Categories />
                    <Details />      
                </Routes>
            </BrowserRouter>
        </div>
    )
}

上面我的两个组件：

类别.js

const Categories = () => {
  return (
    <>    
        <Route path="/" element={<Navigate replace to="/movie" />} />    

        <Route path="/movie" element={<Movies /> } />
        <Route path="/tv" element={<Tv />}/>
        <Route path="/person" element={<People />} />
        <Route path="/search" element={<Search />} />
    </>
  )
}

详情.js

const Details = () => {
  return (
    <>
        <Route path="/movie/:tmdbID" element={<MovieDetail />}/>
        <Route path="/tv/:tmdbID" element={<TvDetail />}/>
        <Route path="/person/:tmdbID" element={<PersonDetail/>}/>
    </>
  )
}

正如你所看到的，似乎

<Routes>

不会只把

Component

当孩子。

我这样做是因为我希望将

Route

放置在不同的文件夹/文件中。其中

Categories.js

和

Details.js

那么，我是如何做到这一点的呢？谢谢你。

Answer 1

错误是准确的。

Categories

和

Details

不是

<Route>

值，它们是它们自己的组件值。事实上，它们的 JSX 中有

<Route>

元素，但这并不意味着它们就是

<Route>

元素。

如果这是一个新项目，您可能会考虑使用 React-Router 较新的 createBrowserRouter() 构造，将路由定义为数据（JS 对象数组）而不是 JSX 元素。然后，您可以将类别和详细信息定义为数据，并在代码中的任何位置引用该数据。

对于使用 React-Router 的人来说，推荐使用

createBrowserRouter()

。