Текст ошибки:
No overload matches this call.
Overload 1 of 2, '(props: BrowserRouterProps | Readonly): BrowserRouter', gave the following error.
Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Overload 2 of 2, '(props: BrowserRouterProps, context: any): BrowserRouter', gave the following error.
Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
1 ответ
У роутера в качестве вложенного должен быть только один элемент, а у вас - два. Оберните их в div.
<Router>
<div>
<NavBar/>
<div>
</div>
</div>
</Router>
Но вообще в роутере по хорошему ничего кроме роутов быть не должно. Элементы расположенные по путям должны возвращать общий шаблон страницы, который подразумевает отрисовку заголовка, футера, и уже всех своих детей, разных для каждого роута детей. что то вроде
<BrowserRouter>
<Routes>
<Router>
<Route path="/ххх/" element={<RootView/>} />
<Route path="yyy" element={<LoginScreen/>} />
</Router>
</Routes>
<BrowserRoute>
LoginScreen:
<CommonPage> вот тут рисуется заголовок и меню боковое и футер
<LoginForm/>
<RegistrationForm/>
</CommonPage>
RootView:
<CommonPage>
<Chart/>
<UserDetails/>
</CommonPage>
CommonPage:
class CommonPage extends React.Component {
render() {
return <div>
<NavBar/>
<div>Children ({this.props.children.length}):</div>
{this.props.children}
<Footer/>
</div>;
}
}