react-router更改URL但不呈现组件
react-router更改URL但不呈现组件
提问于 2020-07-14 20:59:31
在使用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回答 1
Stack Overflow用户
发布于 2020-07-14 21:10:48
问题是，在您的Route组件中，您正在传递一个组件属性，但正确的方法是只包装所需的组件。像这样
<Route path='/onDemandProductSearch'> <OnDemandProductSearch/> </Route>注意！当url仅改变route params并且组件已经加载时，React不呈现组件。如果是这样的话，您应该做的就是将路由参数传递给依赖数组中的useEffect方法，这将导致在url发生更改时重新呈现组件。
const paramData = useParams();
useEffect(()=>{
Some logic when your component gets rendered...},[paramData])}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62895797
复制相关文章
相似问题
腾讯云开发者
