Problems with React-router-dom Withrouter

Asked

Viewed 52 times

-1

If you turn on, I started making an app and I needed a header menu for the transition, this would be a menu that is rendered on every page. That is why it was created and is ultimalized outside the . That’s why I need to upgrade (according to the documentation) the "Withrouter", but because it’s new in Act, I’m having problems understanding the old syntax (which is in the documentation) and I’m not being able to adapt to the new version.

How do I make my menu receive routing capability?

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

//API documentation https://reacttraining.com/react-router/web/api/withRouter

1 answer

-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>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.