response-router изменяет URL, но не отображает компонент

Question

При использовании react-router я сталкиваюсь с проблемой, когда URL-адрес изменяется, но фактически не отображает компонент. Вот как выглядит мой код.

history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

index.js

import { Router } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  document.getElementById('root')
);

App

class App extends React.Component {
    render() {
        return (
            <Switch>
                <Route exact path="/" component={Landing} />
                <Route path="/onDemandProductSearch" component={OnDemandProductSearch} />
            </Switch>
        );
    };
};

I есть заголовок (называемый Header), который отображается на каждом компоненте, он выглядит так:

const Header = () => {
    return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
            <Link className="navbar-brand" to="/">Cirrus</Link>
            <div className="collapse navbar-collapse" id="navbarNav">
                <ul className="navbar-nav">
                    <li className="nav-item">
                        <Link to="/onDemandProductSearch" className="nav-link">On Demand Products</Link>
                    </li>
                </ul>
            </div>
        </nav>
    );
};

Я читал некоторые другие вопросы, которые были похожи, но люди использовали BrowserRouter вместо Router, что не в моем случае.

К вашему сведению, структура моего приложения такая:

My-App
|- src
    |- index.js
    |- history.js
    |- components
        |- App.js
        |- Header.js

Answer 1

Проблема в том, что в вашем Route компоненте вы передаете опору компонента, но правильный способ сделать это - просто обернуть нужный компонент. Как это

<Route path='/onDemandProductSearch'> <OnDemandProductSearch/> </Route>

Внимание! React не отображает компоненты, если URL-адрес изменяет только route params и компонент уже загружен. Если это ваш случай, то вам следует передать параметры маршрута методу useEffect внутри массива dependencies, и это приведет к повторному отображению компонента при изменении URL-адреса.

const paramData = useParams();
useEffect(()=>{
Some logic when your component gets rendered...},[paramData])}