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

我有一个 header （称为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>

注意！ 当 url 仅更改route params并且组件已加载时，React 不会渲染组件。 如果这是你的情况你应该做的是将路由参数传递给依赖数组中的useEffect方法，这将导致组件在 url 发生变化时重新渲染。

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

Answer 2

只需使用<a href="your_url"></a>而不是<Link to="your_url"></Link>标签

这对我有用

<Card>
    <Link to={`/menu/${dish.id}`}>
         <CardImg width="100%" src={baseUrl + dish.image} alt={dish.name} />
         <CardImgOverlay >
             <CardTitle>{dish.name}</CardTitle>
         </CardImgOverlay>
    </Link>
</Card>

我已将上面的代码更改为下面

<Card>
      <a href={`/menu/${dish.id}`}>
          <CardImg width="100%" src={baseUrl + dish.image} alt={dish.name} />
          <CardImgOverlay >
               <CardTitle>{dish.name}</CardTitle>
          </CardImgOverlay>
      </a>
</Card>