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

【问题标题】：React Router Props of parent component refresh whenever I switch between children components每当我在子组件之间切换时，父组件的 React Router Props 都会刷新
【发布时间】：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 组件，一切正常。

标签： javascript reactjs react-router

【解决方案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;

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

【讨论】：