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），该标题显示在每个组件上，如下所示：

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组件中，您正在传递组件prop，但是正确的方法是包装所需的组件。像这样

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

注意！当网址仅更改route params且组件已加载时，React不会呈现组件。如果是这种情况，您应该做的是将路由参数传递给依赖项数组中的useEffect方法，这将导致在URL变化时重新呈现组件。

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

react-router更改URL但不呈现组件

1 个答案: