Question

当我单击导航栏组件时，我当前所在的任何路线也会重新渲染。我不确定为什么会这样。没有道具被传递到正在改变的路线。简化代码如下。如果需要，我可以提供更多。

const App = () => {
    const [drawerOpen, setDrawerOpen] = React.useState(false);

    const handleDrawerToggle = () => { setDrawerOpen(!drawerOpen) };

    return (
        <Router>
            <NavBar handleDrawerToggle={handleDrawerToggle} />
            ...
            <Switch>
                <Route exact path='/' component={TimelinePage} />
                ...
            </Switch>
        </Router>
    );
}

Answer 1

这是因为 NavBar 点击改变了状态，触发了 App 组件本身的更新，从而重新渲染了它的所有组件。

您应该做的是创建一个处理自身状态并包含 NavBar 的新组件。

所以它会像

<Router>
    <MyNavbarComponent />
    ...
    <Switch>
        <Route exact path='/' component={TimelinePage} />
        ...
    </Switch>
</Router>

这样当您单击 NavBar 并触发状态更改时，它只会更改您的组件的状态，而不是 App 组件及其中的所有内容。

如果你想了解更多关于 React 及其组件的更新，我强烈建议你阅读它的生命周期：https://reactjs.org/docs/react-component.html#the-component-lifecycle

希望这对你有用。

为什么反应路由器重新渲染组件？

1 个答案: