在应用程序之外调用路由更改（react-router）

Question

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>
        );
    }
}

Answer 1

I couldn't test your partial snippets of code, but I will point out some things which I think might be causing some problems:

1. You cannot use exact on Link . exact prop is in Route component.
2. You don't need to surround 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.