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

Question

我正在尝试使用React创建一个简单的社交媒体应用程序，用户可以在其中发布内容，其他人可以在提要上看到帖子。我有一个Home组件，我使用useHistory.push方法通过登录组件将道具传递给它。在主组件中，我希望NavBar是持久的，并使用NavBar链接切换内容。每当我使用路由和链接更改子组件时，主组件都会重新加载并丢失道具，导致"无法读取未定义的属性用户名"错误。在道具中，我只保留登录者的用户名。

应用程序组件(默认(

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;

NavBar组件

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，所以如果我需要不同的方法，我会很感激阅读一些建议。

Answer 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;

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