在應用程序之外調用路由更改（react-router）

Question

我正在構建一個 React 應用程序，當 URL 更改時，我需要更改一個組件。

這是我的 app.js：

ReactDOM.render(
    <Provider store={Store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>
, document.getElementById('root'));

主程序

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

主菜單.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> ，什么也沒有發生。

我已經嘗試過exact的<Link> ，但沒有任何變化。

一個有趣的事實：如果我點擊<Link> ，什么都不會發生。 之后，如果我點擊<a href="#"> ，組件會正常加載。

有什么建議？

編輯：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

我無法測試您的部分代碼片段，但我會指出一些我認為可能會導致一些問題的事情：

1. 您不能在Link上使用exact 。 exact道具在Route組件中。
2. 您不需要在Router周圍環繞Link組件。 沒有那個再試一次。

點擊Link后，您的網址是否至少會發生變化？

如果這對您有幫助，請告訴我。