每当我在子组件之间切换时，父组件的 React Router Props 都会刷新

Posted 2023-02-21

【中文标题】每当我在子组件之间切换时，父组件的 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;

这个实现应该可以解决你的问题。