Я создаю приложение реакции, и мне нужно изменить компонент при изменении URL.
Вот мои 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 (компонент, который отвечает за загрузку конкретной страницы)
export default class Pagina extends Component {
render() {
return(
<div id="page">
<Router>
<Switch>
<Route path="/administrativo/cadastro/grupos" component={AdministrativoGrupos} />
</Switch>
</Router>
</div>
);
}
}
«Компонент», который япытается загрузить, это AdministrativoGrupos, но когда я нажимаю <Link> для этого URL, ничего не происходит.
Я уже пробовал exact на <Link>, но ничего не меняется.
Интересный факт: если я нажму на <Link>, ничего не произойдет.После этого, если я нажимаю на <a href="#">, компонент загружается нормально.
Есть предложения?
Редактировать: AdministrativoGrupos import React, {Component} from 'response';
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>
);
}
}