Это часто возникает, но, похоже, ни одно решение не работает, и я чувствую, что исчерпал все возможные варианты, поэтому я обращаюсь сюда, полагая, что это может быть немного другой сценарий, а не дубликат. Если есть существующее решение, которое работает, я буду рад, если мне покажут обратное.

В моем последнем проекте create-react-app у меня не было проблем с отображением новых страниц с маршрутизатором и историей использования. Используя точно такую же настройку, я столкнулся с проблемой, когда history.push(url) изменяется URL-адрес в адресной строке, но страница не отображается повторно.

Я использую:

• Реагировать v17.0.2
• реагировать-маршрутизатор-dom v5.3.0
• история v5.0.1 (также предпринята попытка на v4.10.1)

App.js

 import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Page } from './stories/Page';
import './App.css';

function App() {


    return (
            <Router>
                <Switch>
                    <Route exact path="/">
                        <Page homepage={true} />
                    </Route>
                    <Route path="/project/([a-zA-Z0-9] )/([a-z-0-9] )/([a-z-0-9] )/" render={urlprops =>
                        <Page projectID={urlprops.match.params[0]} homepage={false} />
                    } />
                    <Route path="/project/([a-zA-Z0-9] )/([a-z-0-9] )/" render={urlprops =>
                        <Page projectID={urlprops.match.params[0]} homepage={false} />
                    } />
                </Switch>
            </Router>
        
    );

}

export default App;
 

component-page.js

 import React, { useEffect, useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom'; 
import './menuitem.css';

export const Component = ({ url, ...props }) => {

    let history = useHistory();

    function handleItemClick(e) {
        history.push(url); // <- calls fine, tested with logging to console
    }
    ...
 

Я видел, как старые решения предлагали передавать реквизиты истории через маршрутизатор, но в моем последнем приложении я смог использовать настройку выше, и любой вложенный подкомпонент уровня мог бы вызвать крючок истории использования и использовать push, если бы они были настроены так component-page.js выше. Поэтому я не показал компоненты между App.js и component-page.js исходя из убеждения, что это не должно иметь отношения к useHistory правильному функционированию.

 {
    "pathname": "url string",
    "search": "",
    "hash": "",
    "key": "ctks7v"
}
 

 useEffect(() => {
    apiFetchProject(projectID);
}, []);