I'm building a react app, and i need to change a component when the URL changes.
Here's my app.js:
ReactDOM.render(
<Provider store={Store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'));
Main.js
export default class Main extends Component {
render() {
return(
<div className="d-flex flex-column col-md-12 col-lg-10 p-0 bg-f8f6f9">
<div className="box-header">
<div className="container-edit">
<MainMenu/>
</div>
</div>
<Pagina/>
</div>
);
}
}
MainMenu.js
...
<Router>
...
<Link className="dropdown-item" to="/administrativo/cadastro/grupos">Grupos</Link>
...
</Router>
...
Pagina.js (the component that is responsible for load the specific page)
export default class Pagina extends Component {
render() {
return(
<div id="page">
<Router>
<Switch>
<Route path="/administrativo/cadastro/grupos" component={AdministrativoGrupos} />
</Switch>
</Router>
</div>
);
}
}
The "component" that i'm trying to load, is AdministrativoGrupos
, but when i click on the <Link>
to this url, nothing happens.
I already tried the exact
on <Link>
, but nothing changes.
A interesting fact: if i click on the <Link>
, nothing happens. After that, if i click on a <a href="#">
, the component loads normally.
Any suggestions?
Edit: AdministrativoGrupos import React, { Component } from 'react';
export default class AdministrativoGrupos extends Component {
render() {
return(
<div className="w-80 ml-auto mr-auto mt-4">
<div className="row">
<div className="col-lg-6">
<nav className="Breadcrumb">
<ol>
<li>Administrativo <i className="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Cadastro <i className="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Grupos</li>
</ol>
</nav>
</div>
<div className="col-lg-6">
<div className="d-flex box-pesquisar-grupos">
<div className="box-pesquisar-grupos-input">
<select v-model="selected" id="group-select" className="js-example-responsive" disabled>
</select>
</div>
<i className="fa fa-file-o" aria-hidden="true"></i>
</div>
</div>
</div>
<div className="row">
<div className="content-grupos">
<p className="p-style1">Grupo*</p>
<button className="btn btn-info add-grupo-js">Adicionar Grupo</button>
<button className="btn btn-danger delete-grupo-js">Deletar
Grupo</button>
<div className="float-left w-100 table-wrapper box-table-grupos js-scrollbar2">
<form id="form-group" method="POST">
<table className="table table-grupos">
<thead>
<tr>
<th scope="col">Item do menu</th>
<th scope="col">Incluir</th>
<th scope="col">Excluir</th>
<th scope="col">Alterar</th>
<th scope="col">Pesquisar</th>
<th scope="col">Visualizar</th>
<th scope="col">Todos</th>
</tr>
</thead>
<tbody>
<tr id="permission1e">
<th scope="col">
Teste
<input type="hidden" className="id-js" name="permissoes[1e][id]"
value="1e"/>
</th>
<th scope="col">
<label className="persona-check-e-radio">
<input className="insert check-option-js" name="permissoes[1e][insert]"
type="checkbox"/>
<span className="checkmark"></span>
</label>
</th>
<th scope="col">
<label className="persona-check-e-radio">
<input className="delete check-option-js" name="permissoes[1e][delete]"
type="checkbox"/>
<span className="checkmark"></span>
</label>
</th>
<th scope="col">
<label className="persona-check-e-radio">
<input className="update check-option-js" name="permissoes[1e][update]"
type="checkbox"/>
<span className="checkmark"></span>
</label>
</th>
<th scope="col">
<label className="persona-check-e-radio">
<input className="search check-option-js" name="permissoes[1e][search]"
type="checkbox"/>
<span className="checkmark"></span>
</label>
</th>
<th scope="col">
<label className="persona-check-e-radio">
<input className="read check-option-js" name="permissoes[1e][read]"
type="checkbox"/>
<span className="checkmark"></span>
</label>
</th>
<th scope="col">
<label className="persona-check-e-radio">
<input className="all check-option-js" type="checkbox"/>
<span className="checkmark"></span>
</label>
</th>
</tr>
</tbody>
</table>
<button className="btn btn-info">Salvar</button>
<input type="hidden" name="groupid" id="groupid"/>
<input type="hidden" name="isdefault" id="isdefault"/>
</form>
</div>
</div>
</div>
</div>
);
}
}
I couldn't test your partial snippets of code, but I will point out some things which I think might be causing some problems:
exact
on Link
. exact
prop is in Route
component. Link
component around Router
. Try again without that. Also is your url at least changing after clicking on Link
?
Let me know if this helps you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.