每当我在子组件之间切换时,父组件的 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 都会刷新的主要内容,如果未能解决你的问题,请参考以下文章

VUE:组件与组件之间的通信

react-router-dom 链接在 app.js(父组件)中有效,但在子组件中无效

问题将Redux与来自React的父道具连接起来

在子组件和父组件之间传递数据

React Hook - 无法在子组件 onComplete 回调中调用父组件调度

Vue父组件向子组件传值 (props)、子组件改变父组件的值($emit)