每当我在子组件之间切换时，父组件的React路由器道具都会刷新

Question

我试图使用React创建简单的社交媒体软件，用户可以发布一些内容，其他人可以在提要上看到帖子。我有一个Home组件，我通过使用useHistory.push方法的登录组件向其传递道具。在Home组件中，我希望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;

导航栏组件

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

再见，我会像这样重写你的代码：

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;

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