Переключите маршрутизатор с Navbar

Question

Мне бы хотелось, чтобы навигационная панель находилась вверху каждой страницы, кроме страницы «Введение».Это правильный способ сделать это?Есть ли более чистый способ сделать это?

<BrowserRouter>
    <div>
        <Switch>
            <Route exact path = "/" component = {Introduction} />
            <div>
                <Navbar/>
                <PrivateRoute path = "/main" component = {main} />)
                <PrivateRoute path = "/other" component = {other} />)
            </div>
        </Switch>
    </div>
</BrowserRouter>

Answer 1

Вы можете сделать это, выполнив что-то вроде этого:

class App extends React.Component{
    render(){
        const DefaultRoutes = () => {
            return(
                <div>
                    <Navbar/>
                    <Switch>
                        <PrivateRoute path = "/main" component = {main} />)
                        <PrivateRoute path = "/other" component = {other} />)
                    </Switch>                                                                                                           
                </div>
            )
        }

        return(
            <BrowserRouter>
                <div>
                    <Switch>
                        <Route exact path = "/" component = {Introduction} />
                        <Route component={DefaultRoutes}/>
                    </Switch>
                </div>
            </BrowserRouter>
        )
    }
}

export default App

Определить функцию DefaultRoutes, которая включает в себя все маршруты, которые будут иметь навигационную панель. Затем используйте эту функцию в качестве компонента для маршрута в вашем BrowserRouter. Все остальное, для чего не нужен Navbar, может быть определено в его собственном маршруте, например, Введение