每当我在子组件之间切换时,父组件的 React Router Props 都会刷新
Posted
技术标签:
【中文标题】每当我在子组件之间切换时,父组件的 React Router Props 都会刷新【英文标题】:React Router Props of parent component refresh whenever I switch between children components 【发布时间】:2020-11-12 13:03:42 【问题描述】:我正在尝试使用 React 创建简单的社交媒体应用程序,用户可以在其中发布一些内容,而其他所有人都会在 feed 上看到帖子。 我有一个 Home 组件,我使用 useHistory.push 方法通过登录组件向其传递道具。 在 Home 组件中,我希望 NavBar 持久化并使用 NavBar 链接切换内容。每当我使用 Route 和 Link 更改子组件时,Home 组件都会重新加载并丢失道具,从而导致“无法读取未定义的属性用户名”错误。 在道具中,我只保留登录人的用户名。
应用组件(默认)
function App()
console.log('app loaded')
return (
<BrowserRouter>
<Route path="/" exact component=Login />
<Route path="/app" component=Home />
<Route path="/register" exact component=Register />
</BrowserRouter>
);
export default App;
首页组件
const Home = (props) =>
console.log('loaded home')
const username = props.location.state.username
return (
<div>
<NavBar user=username />
<Switch>
<Route path="/app/feed" component=Feed />
</Switch>
</div>
)
export default Home;
导航栏组件
const NavBar = (props) =>
return (
<nav className="navbar navbar-expand-md navbar-light fixed-top">
<h2>Welcome, props.user</h2>
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/app/feed" className="nav-link">Feed</Link>
</li>
<li className="nav-item">
<Link to="/app" className="nav-link">User Page</Link>
</li>
<li className="nav-item">
<Link to="/" className="nav-link" id="log-out-link">Log out</Link>
</li>
</ul>
</nav>
)
export default NavBar;
我刚刚开始使用 React,所以如果我需要不同的方法,我会很感激阅读一些建议。
【问题讨论】:
路径一旦改变,location
也会改变; props.location
将是新路由/匹配路径的位置对象。也许您应该将经过身份验证的状态/人员存储在 App
中并作为道具传递给路由组件,或者使用 react Context API 或类似的东西(即 redux)。
非常感谢!我从登录页面使用 useState 钩子将道具传递给 Home 组件,一切正常。
【参考方案1】:
Ciao,我会这样重写你的代码:
App.js
function App()
console.log('app loaded')
return (
<BrowserRouter>
<Route path="/" exact component=Login />
<Route path="/app" component=Home>
<Route path="/app/feed" component=Feed />
</Route>
<Route path="/register" exact component=Register />
</BrowserRouter>
);
export default App;
Home.js
const Home = (props) =>
console.log('loaded home')
const username = props.location.state.username
return (
<div>
<NavBar user=username />
</div>
)
export default Home;
NavBar.js
const NavBar = (props) =>
return (
<nav className="navbar navbar-expand-md navbar-light fixed-top">
<h2>Welcome, props.user</h2>
<ul className="navbar-nav">
<li className="nav-item" onClick=() => history.push('/app/feed') >
</li>
<li className="nav-item" onClick=() => history.push('/app') >
</li>
<li className="nav-item" onClick=() => history.push('/')>
</li>
</ul>
</nav>
)
export default NavBar;
这个实现应该可以解决你的问题。
【讨论】:
以上是关于每当我在子组件之间切换时,父组件的 React Router Props 都会刷新的主要内容,如果未能解决你的问题,请参考以下文章
react-router-dom 链接在 app.js(父组件)中有效,但在子组件中无效