Doubt about React-Router

Question

My App.jsx has a Browserrouter with Nav, Footer and between them the Routes, but I want a /admin that does not render the Nav and Footer. But necessarily when I add /admin to the Routes it pulls Nav and Footer. Someone can help me

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>

Answer 1

You need to separate common routes from admin routes.

Take an example:

// 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>
    )
}