React Router Вопрос: почему history.pu sh меняет URL, но не обновляет компонент

Question

Ниже приведен пример кода, который отображает две кнопки (домой и около) и двухстраничный компонент (также дома и около). При нажатии на каждую кнопку кнопки будут вызывать history.push - go на соответствующей странице и отображать компонент.

Однако я заметил, что при нажатии кнопки URL-адрес изменяется, но компонент не отображается. Мне удается исправить это, передав свойство { forceRefresh: true } при создании истории браузера, подобной этой const history = createBrowserHistory({ forceRefresh: true }); Тем не менее, я не совсем понимаю, почему это происходит и почему forceRefre sh решает проблему и будет признателен за любое объяснение.

Причина, по которой я не использовал компонент <Link> для обтекания кнопки, заключается в том, что я хочу вызвать функцию для выполнения чего-либо перед перенаправлением при нажатии кнопки. Если есть другой способ сделать это, я хотел бы узнать от сообщества. Спасибо.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const MyApp = () => {
    const history = createBrowserHistory();
    return (
        <Router history={history}>
            <div>
                <ul>
                    <li>
                        <button onClick={() => history.push('/')}>Home</button>
                    </li>
                    <li>
                        <button onClick={() => history.push('/about')}>About</button>
                    </li>
                </ul>

                <Switch>
                    <Route exact path='/'>
                        <Home />
                    </Route>
                    <Route exact path='/about'>
                        <About />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
};

function Home() {
    return (
        <div>
            <h2>Home</h2>
        </div>
    );
}

function About() {
    return (
        <div>
            <h2>About</h2>
        </div>
    );
}

ReactDOM.render(<MyApp />, document.getElementById('root'));

Answer 1

Это из-за этой строки:

const history = createBrowserHistory();

Вы создаете экземпляр объекта history, который будет использоваться Router для отслеживания истории маршрутизации. Это то, что скрыто используется Router, и вам не нужно об этом беспокоиться.

То, что вы делаете неправильно, - это думайте, что переменная history, которую вы там объявили (используйте Router) это то же самое, что используется для навигации по приложению. Это не так.

Вы должны использовать это history для навигации:

import { useHistory } from 'react-router-dom'

Использование:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { useHistory } from 'react-router-dom';

const MyApp = () => {
    const historyInstance = createBrowserHistory();

    const history = useHistory();

    return (
        <Router history={historyInstance}>
            <div>
                <ul>
                    <li>
                        <button onClick={() => history.push('/')}>Home</button>
                    </li>
                    <li>
                        <button onClick={() => history.push('/about')}>About</button>
                    </li>
                </ul>

                <Switch>
                    <Route exact path='/'>
                        <Home />
                    </Route>
                    <Route exact path='/about'>
                        <About />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
};

И с этим, все должно работать