[英]converting react router to v6
我在尝试将现有应用程序转换为使用react-router v6时收到一条错误消息:
错误:
<Route>
只能用作<Routes>
元素的子元素,从不直接渲染。 请将您的<Route>
包裹在<Routes>
中。
这是我的App
组件( BrowserRouter
包装了应用程序,自定义Router
组件是一个子组件):
import React from 'react';
import './config';
import './App.css';
import { BrowserRouter } from 'react-router-dom';
import Router from './auth/route/router';
import Header from './components/header';
// import MobileHeader from './components/header/mobileHeader/MobileHeader';
import Footer from './components/footer';
import { AuthDataProvider } from './auth/AuthDataContext';
export default function App() {
return (
<div className='App'>
<BrowserRouter>
<AuthDataProvider>
{/* <MobileHeader /> */}
<Header />
<Router />
</AuthDataProvider>
<Footer />
</BrowserRouter>
</div>
);
}
Router
组件分别包含Routes
和Route
作为子组件:
import React from 'react';
import { Route, Routes } from 'react-router-dom';
// import PrivateRoute from './privateRoute';
import CompanyDetailsPage from '../../components/pages/company-details';
import DashboardPage from '../../components/pages/dashboard';
import HomePage from '../../components/pages/home';
import MessagesPage from '../../components/pages/messages';
import MyClientsPage from '../../components/pages/my-clients';
import Privacy from '../../components/pages/privacy';
import ProviderClientsPage from '../../components/pages/provider-clients';
import ProfilePage from '../../components/pages/profile';
import TermsPage from '../../components/pages/terms';
import ServiceDiscoveryPage from '../../components/pages/service-discovery';
import onBoarding from '../../components/pages/onboarding/onBoarding';
function Router(props) {
return (
<Routes>
<Route exact path='/' element={HomePage} />
<Route exact path='/privacy' element={Privacy} />
<Route exact path='/terms' element={TermsPage} />
<Route {...props} path='/dashboard' element={DashboardPage} />
<Route {...props} path='/profile' element={ProfilePage} />
<Route {...props} path='/onboarding' element={onBoarding} />
<Route
{...props}
path='/company-details'
element={CompanyDetailsPage}
/>
<Route
{...props}
path='/company-clients'
element={ProviderClientsPage}
/>
<Route {...props} path='/my-clients' element={MyClientsPage} />
<Route
{...props}
path='/service-discovery'
element={ServiceDiscoveryPage}
/>
<Route {...props} path='/messages' element={MessagesPage} />
</Routes>
);
}
export default Router;
我不确定这个错误相对于我的架构意味着什么。 它似乎在检查我,当然我知道某处缺少某些东西。 这是我使用路由器 v6 的第一天,因此我们将不胜感激。 谢谢!
Routes
组件到Route
组件的整体结构是正确的,但是路由组件应该在element
prop 上呈现为 JSX,而不是对 React 组件的引用。
function Router(props) {
return (
<Routes>
<Route path='/' element={<HomePage />} />
<Route path='/privacy' element={<Privacy />} />
<Route path='/terms' element={<TermsPage />} />
<Route {...props} path='/dashboard' element={<DashboardPage />} />
<Route {...props} path='/profile' element={<ProfilePage />} />
<Route {...props} path='/onboarding' element={<OnBoarding />} />
<Route
{...props}
path='/company-details'
element={<CompanyDetailsPage />}
/>
<Route
{...props}
path='/company-clients'
element={<ProviderClientsPage />}
/>
<Route {...props} path='/my-clients' element={<MyClientsPage />} />
<Route
{...props}
path='/service-discovery'
element={<ServiceDiscoveryPage />}
/>
<Route {...props} path='/messages' element={<MessagesPage />} />
</Routes>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.