0

Meu App.jsx possui um BrowserRouter com Nav, Footer e entre eles as routes, porém quero um /admin que não renderize o Nav e Footer. Porém necessariamente quando adiciono /admin no routes ele puxa Nav e Footer. Alguém pode me ajudar

App.jsx:

export default props =>
<BrowserRouter>
    <div className="app">
        <Nav />
        <Routes />
        <Footer />
    </div>
</BrowserRouter>

Router.js

export default props =>
<Switch>
    <Route exact path='/' component={Home} />
    <Route path='/noticias/' component={Noticias} />
    <Route path='/produtos/' component={Produtos} />
    <Route path='/academicos/' component={Academicos} />
    <Route path='/login/professores/' component={LoginProfessores} />
    <Redirect from='*' to='/' />
</Switch>
2
  • vc utiliza state no App.jsx? (eu consegui uma forma usando state e context) Commented 1/08/2019 às 0:32
  • só que a forma que eu consegui, não renderiza nav e footer quando sair de /admin Commented 1/08/2019 às 0:56

1 Resposta 1

0

Você precisa separar as rotas comuns das rotas de admin.

Veja um exemplo:

// OtherRoutes.jsx
export function OtherRoutes(props){
    return (
        <div>
            <nav/>
            <Switch>
                <Route exact path={`/`} component={Home} />
                <Route path={`/noticias`} component={Noticias} />
                <Route path={`/produtos`} component={Produtos} />
                <Route path={`/academicos`} component={Academicos} />
                <Route path={`/login/professores`} component={LoginProfessores} />       
            </Switch>
            <footer/>
        </div>
    )
}

//Routes.jsx
export function Routes () {
    return (
        <BrowserRouter>
            <Switch>
                <Route path='/admin' component={AdminComponent} />
                <Route path='/' component={OtherRoutes}>
                <Redirect from='*' to='/' />
            </Switch>
        </BrowserRouter>
    )
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .