Javascript 应用程序外部呼叫路由更改（react路由器）
我正在构建一个react应用程序，当URL更改时，我需要更改一个组件 以下是我的app.js：Javascript 应用程序外部呼叫路由更改（react路由器）,javascript,reactjs,routes,react-router,Javascript,Reactjs,Routes,React Router,我正在构建一个react应用程序，当URL更改时，我需要更改一个组件 以下是我的app.js： ReactDOM.render( <Provider store={Store}> <BrowserRouter> <App /> </BrowserRouter> </Provider> , document.getElementById('root')); 我无法测
ReactDOM.render(
<Provider store={Store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'));
我无法测试您的部分代码片段，但我将指出一些我认为可能导致一些问题的事情：
链接上使用exact
<代码>精确路线中链接组件
路由器
。不要那样，再试一次
链接后是否至少发生了变化
如果这对您有帮助，请告诉我。很抱歉，我指的是带有exact的链接，我指的是路线
。我移除了环绕链接的路由器，但没有改变结果。URL正在更改，但组件未加载。谢谢你的提示和帮助。你能回答我关于url在点击链接后是否被更改的问题吗？是的，url在点击链接后正在更改。你能提供一个Administrivogrupos组件的片段吗？完成。我对React没有太多经验，可能是出了什么问题。看起来不错。你查过了吗？没有，我想这是我的问题。我用的是redux，我不知道他对这件事有影响。谢谢
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>
);
}
}
...
<Router>
...
<Link className="dropdown-item" to="/administrativo/cadastro/grupos">Grupos</Link>
...
</Router>
...
export default class Pagina extends Component {
render() {
return(
<div id="page">
<Router>
<Switch>
<Route path="/administrativo/cadastro/grupos" component={AdministrativoGrupos} />
</Switch>
</Router>
</div>
);
}
}
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>
);
}
}