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>
          </>
        )
    }
}
→ Ссылка