javascript - React如何拥有不受React路由器影响的组件

Question

目前我有一个 react 路由器，可以像这样渲染 View

render((
     <BrowserRouter onUpdate={() => window.scrollTo(0, 0)}>
        <Switch>
            <Route path="/Home" component={MainView} ignoreScrollBehavior/>
            <Route path="/Graphs" component={NotMainView} ignoreScrollBehavior/>
            <Route path="/" component={MainView} ignoreScrollBehavior/>
        </Switch>
     </BrowserRouter>
     ),
     document.getElementById('container')
);

但是在我的组件“MainView”和“NotMainView”中，我有一个名为“SideNavigation”的相同组件，如下所示

“主视图”

render () {
    return (
        <div>
            <SideNavigation store={store}/>
            <DemoComponent store={store}/>
        </div>

        ); 
    }
}

“不是主视图”

render () {
    return (
        <div>
            <SideNavigation store={store}/>
            <h1>Graph router working</h1>
        </div>

        ); 
    }
}

这会导致“SideNavigation”组件在不应该重新呈现的情况下重新呈现。我如何分解“SideNavigation”组件，以便路由器只影响除 SideNavigation 之外的所有内容？添加我想要做的是有一个我称之为“SideNavigation”的组件，它是我的菜单，始终可见，并且路由应该只重新渲染页面的其余部分，而不是它本身。

Answer 1

我建议您创建一个包含 SideNavigation 组件以及应用程序其余部分的父组件，如下所示:

//ParentComponent
render() {
    return (
       <div>
          <SideNavigation>
          <ViewsComponent>
       </div>
    );
}

并让您的 ViewsComponent 处理 Main 和 NotMain View 之间的切换:

//ViewsComponent
render() {
    return (
       <Switch>
        <Route path="/Home" component={MainView} ignoreScrollBehavior/>
        <Route path="/Graphs" component={NotMainView} ignoreScrollBehavior/>
        <Route path="/" component={MainView} ignoreScrollBehavior/>
       </Switch>
    );
}

当然，现在 MainView 和 NotMainView 组件不包含您的 SideNavigation。