我正在构建一个React应用，当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，但是当我单击此URL的<Link>时，没有任何反应。
我已经在exact上尝试过<Link>，但没有任何变化。
一个有趣的事实：如果我单击<Link>，则什么也没有发生。之后，如果我单击<a href="#">，该组件将正常加载。
有什么建议吗？
编辑：AdministrativoGrupos 从'react'导入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>
);
}
}
答案 0 :(得分：1)
我无法测试您的部分代码片段，但我会指出一些我认为可能引起问题的东西：
exact上使用Link。 exact中有Route个道具
组件。Link组件周围
Router。如果没有，请重试。点击Link后，您的网址至少也改变了吗？
让我知道这是否对您有帮助。