Router не дружит с React
При добавлении в реакт, ругается и выдает миллион ошибок, требуя родительский элемент, хотя с навбаром никаких проблем не было, подскажите, что делать, я ужасно плох в реакте и писать Router в новом файле и потом соединять будет просто мучением.
export default class Header extends Component{
render() {
return (
<Navbar fixed="top" collapseOnSelect expand="md" bg="light">
<Container>
<Navbar.Brand href="/">
<img
src={logo}
height="90"
width="191"
className="d-inline-block align=top"
alt="Logo"
/>
</Navbar.Brand>
<NavbarToggle aria-controls="responsive-navbar-nav" />
<NavbarCollapse id="responsive-navbar-nav" >
<Nav className="mr-2">
<Nav.Link href="/about">О нас</Nav.Link>
<Nav.Link href="/service">Сервисы и услуги</Nav.Link>
<Nav.Link href="/technology">Технологии</Nav.Link>
<Nav.Link href="/portfolio">Портфолио</Nav.Link>
<Nav.Link href="/work">Работа у нас</Nav.Link>
</Nav>
<Form inline>
<Button variant="outline-info"><img src="https://smartru.com/local/templates/smartech/img/search-active.min.png" alt="posik"></img></Button>
</Form>
</NavbarCollapse>
</Container>
</Navbar>
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={Home} />
<Route exact path="/service" component={Home} />
<Route exact path="/technology" component={Home} />
<Route exact path="/portfolio" component={Home} />
<Route exact path="/work" component={Home} />
</Switch>
</Router>
)
}
}
Ответы (1 шт):
Автор решения: p1uton
→ Ссылка
render обязательно должен возвращать один корневой элемент, а уже внутри него все остальное:
export default class Header extends Component{
render() {
return (
<>
<Navbar fixed="top" collapseOnSelect expand="md" bg="light">
<Container>
<Navbar.Brand href="/">
<img
src={logo}
height="90"
width="191"
className="d-inline-block align=top"
alt="Logo"
/>
</Navbar.Brand>
<NavbarToggle aria-controls="responsive-navbar-nav" />
<NavbarCollapse id="responsive-navbar-nav" >
<Nav className="mr-2">
<Nav.Link href="/about">О нас</Nav.Link>
<Nav.Link href="/service">Сервисы и услуги</Nav.Link>
<Nav.Link href="/technology">Технологии</Nav.Link>
<Nav.Link href="/portfolio">Портфолио</Nav.Link>
<Nav.Link href="/work">Работа у нас</Nav.Link>
</Nav>
<Form inline>
<Button variant="outline-info"><img src="https://smartru.com/local/templates/smartech/img/search-active.min.png" alt="posik"></img></Button>
</Form>
</NavbarCollapse>
</Container>
</Navbar>
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={Home} />
<Route exact path="/service" component={Home} />
<Route exact path="/technology" component={Home} />
<Route exact path="/portfolio" component={Home} />
<Route exact path="/work" component={Home} />
</Switch>
</Router>
</>
)
}
}