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>
就能正常使用了
原创内容，欢迎转载 😊
