@reach/router的嵌套路由失效的可能原因


TL;DR

请确认失效路由的上一级路由配置path的时候,附带了后缀/*

出错代码

// App.tsx
const NotFound = (props: RouteComponentProps) => <p>Sorry, nothing here</p>

  <Router>
    <Login path="login" />
    <Reg path="reg" />
    <NotFound default={true} />
  </Router>

// Login.tsx
  <Router>
    <Phone path="phone" />
    <Username path="/" />
    <Scan path="scan" />
  </Router>

直接访问/login/ 可以正确访问到Username 但是访问/login/phone 会回退到NotFound 访问/login/scan 也是会访问NotFound 但是如果把Login里面的路由写到App.tsx里面就可以

const NotFound = (props: RouteComponentProps) => <p>Sorry, nothing here</p>

  <Router>
    <Login path="login">
      <Phone path="phone" />
      <Username path="/" />
      <Scan path="scan" />
    </Login>
    <Reg path="reg" />
    <NotFound default={true} />
  </Router>

问题解决

后面在官网的demo中,终于发现问题所在。

为了方便路由的灵活构建,@reach/router是支持在任意地方构建router,但是前提是父级的router的path,在书写上需要补充一个后缀/*

make sure to use /* so child routes have a chance to match

最开始的代码,做如下修改:

// App.tsx
const NotFound = (props: RouteComponentProps) => <p>Sorry, nothing here</p>

  <Router>
    <Login path="login/*" />
    <Reg path="reg" />
    <NotFound default={true} />
  </Router>

// Login.tsx
  <Router>
    <Phone path="phone" />
    <Username path="/" />
    <Scan path="scan" />
  </Router>

就能正常使用了


文章作者: wanuq
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 wanuq !
 上一篇
React里面是如何区分Class和Function的 React里面是如何区分Class和Function的
针对文章https://overreacted.io/how-does-react-tell-a-class-from-a-function/的摘录 为什么要区分从两种形式的Component中获取node节点的方式不一样,Function
2018-12-05
下一篇 
网站出现Connection refused的可能原因 网站出现Connection refused的可能原因
今天,网站又一次挂了,基于docker跑的mysql不知道怎么就坏了。 登上服务器,试过stop, kill, restart,都不能正确重启这个docker container。无奈之下,只要拿出重启大法 执行reboot命令,ssh
2018-08-20
  目录