首页 文章

反应如何使组件不受反应路由器的影响

提问于
浏览 次
0

目前我有一个反应路由器，可以呈现这样的视图

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”，就像这样

“的MainView”

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

        ); 
    }
}

“NotMainView”

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

        ); 
    }
}

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

javascript reactjs react-router

2 回答

  • 0

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

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

    让你的 ViewsComponent 处理 Main 和 NotMain 视图之间的切换：

    //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 .

    回复于
  • 3

    把它放在外面 . 以下是我的代码示例：

    ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Route path="/" component={Navigation} />
        <Switch>
          <Route path="/posts/new" component={PostsNew} />
          <Route path="/" component={PostsIndex} />
        </Switch>
      </div>

    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));
    回复于

相关问题