阅读 1244

react-router4 路由嵌套 及 Switch使用问题(详细里有贴代码具体描述) ?

需求是:HomeLayout包含了一个公用的的菜单,home、userAdd、bookAdd 这些页面需要展示 组件本身 + HomeLayout,但是 login页面 只需要展示 Login 。

用的是 react-router-dom 4.2.2

代码1

const Init = () =>
  <Router history={hashHistory}>
    <Route component={HomeLayout}>
      <Route path="/" component={HomePage}/>
      <Route path="/user/add" component={UserAddPage}/>
      <Route path="/book/add" component={BookAddPage}/>
    </Route>
    <Route path="/login" component={LoginPage}/>
  </Router>;
复制代码

代码1:router 4 以前的代码是这么写,可以实现功能

代码2

const Init = () =>
  <HashRouter>
    <div>
      <HomeLayout>
        <Route exact path="/" component={Home}/>
        <Route exact path="/user/add" component={UserAdd} />
        <Route exact path="/book/add" component={BookAdd} />
      </HomeLayout>
      <Route exact path="/login" component={Login} />
    </div>
  </HashRouter>;
复制代码

代码2:我改造成上面的内容后,在 login 页面,会展示 HomeLayout 和 Login

代码3

const Init = () =>
  <HashRouter>
    <Switch>
      <Route exact path="/login" component={Login} />
      <HomeLayout>
        <Route exact path="/" component={Home}/>
        <Route exact path="/user/add" component={UserAdd} />
        <Route exact path="/book/add" component={BookAdd} />
      </HomeLayout>
    </Switch>
  </HashRouter>;
复制代码

代码3: 能满足我的需求,login 页面不会展示 HomeLayout,只展示 Login

代码4:

const Init = () =>
  <HashRouter>
    <Switch>
      <HomeLayout>
        <Route exact path="/" component={Home}/>
        <Route exact path="/user/add" component={UserAdd} />
        <Route exact path="/book/add" component={BookAdd} />
      </HomeLayout>
      <Route exact path="/login" component={Login} />
    </Switch>
  </HashRouter>;
复制代码

代码4:login 页面,只展示 HomeLayout,没有展示 Login

问题1:我用了 Switch 后,发现书写顺序会影响 login 页面的展示(代码3 和 代码4),这里不理解,希望大神能帮忙解释下。

问题2:代码3 虽然能实现我的需求,但是不知道这种写法是不是合理的,如果不太优雅,能否提供一个比较优雅的写法

文章分类
前端
文章标签