Почему не работает Switch в React js?

Question

[Дмитрий]

import React, {Component} from 'react';
import Footer from './components/footer/Footer';
import Header from './components/header/Header';
import Slidermain from './components/SliderMain/Slidermain';
import Recommended from './components/Recommended';
import Movietiphome from './components/Movietiphome';
import Howitwork from './components/howitwork/Howitwork';
import Advants from './components/advants/Advants';
import Ancorup from './components/Ancorup';


import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import AboutPage from './components/pages/AboutPage';
import ShopPage from './components/pages/ShopPage';
import VideotipPage from './components/pages/VideotipPage';
import StockPage from './components/pages/StockPage';
import DoyouknowPage from './components/pages/DoyouknowPage';
import ContactsPage from './components/pages/ContactsPage';

import './App.css';

class App extends Component {

    render() {
        return (
            <Router>
                <div className="content__main">

                    <Header/>
                    <Switch>
                        <div id="main" className="site__main">

                            <Route exact path="/" render={props => (
                                <React.Fragment>
                                    <Ancorup/>

                                    <Slidermain/>

                                    <Recommended/>

                                    <Movietiphome/>

                                    <Howitwork/>

                                    <Advants/>
                                </React.Fragment>
                            )} />
                            <Route exact path="/about-cosmetics" component={AboutPage} />
                            <Route exact path="/shop" component={ShopPage} />
                            <Route exact path="/videotip" component={VideotipPage} />
                            <Route exact path="/stock" component={StockPage} />
                            <Route exact path="/doyouknow" component={DoyouknowPage} />
                            <Route exact path="/contacts" component={ContactsPage} />
                            <Route component={() => <div>404 Not found</div>} />
                        </div>
                    </Switch>
                </div>
                <Footer/>
            </Router>
        );
    }
}

export default App;

Если маршрут есть выводит компонент + компонент 404
Если маршрута нет выводит компонент 404

В чем может быть ошибка?

Answer 1

[0xD34F]

<Switch>
    <div id="main" className="site__main">

Дочерними элементами Switch могут быть только Route или Redirect. Поменяйте их местами, что ли - пусть Switch будет внутри этого main'а.