-1

Se liga, eu comecei a fazer um app e precisava de um menu de cabeçalho pra a transição, seria esse um menu que é renderizado em toda página. Por isso ele foi criado e é ultilizado fora das . Por isso preciso ultilizar (segundo a documentação) o "WithRouter", porém por ser novo em react, estou tendo problemas pra entender a sintaxe antiga (que está na documentação) e não estou conseguindo adaptar para a nova versão.

Como eu faço o meu menu receber a capacidade de roteamento?

//Menu que precisa das rotas
export default function MenuBar() {
return(
    <DropdownButton title={title} id="bg-nested-dropdown">
                    <Dropdown.Item as="button" eventKey="1">
                        Home
                    </Dropdown.Item>
                    <Dropdown.Item as="button" eventKey="2">
                        Sobre
                    </Dropdown.Item>
                    <Dropdown.Item as="button" eventKey="4">
                        Cadastro de Post
                    </Dropdown.Item>
                    <Dropdown.Divider />
     </DropdownButton>
)};


//app.js do react


function App() {
    return (
        <div className="App">
            <MenuBar></MenuBar>
            <div className="container">
                <Routes></Routes>
            </div>
        </div>
    );
}

//documentação da API https://reacttraining.com/react-router/web/api/withRouter

1 Resposta 1

-2
import React, { Component } from 'react';
import { MenuBar as Router, Switch, Route, Link } from 'react-router-dom'

return(
<Router>
  <div>
    <DropdownButton title={title} id="bg-nested-dropdown">
                    <Dropdown.Item as="button" eventKey="1">
                        <Lintk to={/}>Home </Link>
                    </Dropdown.Item>
                    <Dropdown.Item as="button" eventKey="2">
                        <Lintk to={/sobre}>Sobre </Link>
                    </Dropdown.Item>
                    <Dropdown.Item as="button" eventKey="4">
                        <Lintk to={/cadastrar}> Cadastro de Post </Link>
                    </Dropdown.Item>
                    <Dropdown.Divider />
     </DropdownButton>
     )};
    </div>
    <div>
       <Switch>
           <Route exact path={["/", "/home"]} component={home} />
           <Route exact path="/sobre" component={sobre} />
           <Route exact path="/cadastrar" component={cadastrarPost} />
       </Switch>
    </div>
</Router>

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 .