React: BrowserRouter muda a url, mas não renderiza o componente

14 de outubro de 2021 2 respostas Resolvido

Zeca_Peteca 14 de outubro de 2021

Ao clicar no Link do react-router ele não renderiza o componente do jeito que deveria, só é renderizado quando eu dou um refresh na página…
Import:

import { BrowserRouter as Router, Link, Route } from 'react-router-dom';

Links:

<div id="buttons">
  <Router>
    <Link id="btn-main-page" className="btn-classic-menu" to="/">Página inicial</Link>
    <Link id="btn-explore" className="btn-classic-menu" to="/auth">Explorar</Link>
  </Router>
</div>

Routes:

<Router>
  <Route exact path="/" component={() => <Home tweets={tweets}/>}/>
  <Route exact path="/auth" component={AuthPage}/>
</Router>

2 Respostas

Solucao aceita

rodriguesabner 18 de out. de 2021 1 like

Seu routes está exatamente assim? Muda pra essa estrutura abaixo e faz o teste (todos são importações do react router dom).

<Router history={history}>
        <Switch>

            <Route path="/entrar" component={Login}/>
            <Route path="/registrar" component={Register}/>

        </Switch>
    </Router>

Cria um arquivo chamado history.js dentro do seu src.

import {createBrowserHistory as history} from 'history';
export default history();

E no seu App.js, o BrowserRouter tem que estar como pai de todos elementos, um exemplo do meu uso em uma aplicação

<BrowserRouter>
        <ThemeProvider theme={theme}>
                <Tour
                    steps={steps}
                    isOpen={isTourOpen}
                    showNumber={false}
                    getCurrentStep={(curr) => setTourStep(curr)}
                    showNavigation={false}
                    showButtons={false}
                    showCloseButton={false}
                />

                <Container>
                    <Wrapper>
                        <DivPrincipal>
                            <Routes.Routes/>
                        </DivPrincipal>
                        <BottomNavigationMenu/>
                    </Wrapper>
                </Container>

                <GlobalStyles/>
        </ThemeProvider>
    </BrowserRouter>

Zeca_Peteca 22 de out. de 2021 1 like

Opa! Desculpa a demora, fiquei um tempo sem mexer no meu projeto…
Enfim, eu coloquei o Router como pai de todos os elementos, como vc mencionou, e isso foi o suficiente pra tudo funcionar. Obrigado

Criado 14 de outubro de 2021

Ultima resposta 22 de out. de 2021

Respostas 2

Participantes 2

2 Respostas

Topicos relacionados