react-router - 是否可以在 React Router 4 中匹配路由的 # 部分

Question

在我的应用程序中，我想将路径和哈希值都匹配到不同的组件。例如:

/pageA#modalB

将显示 PageA 作为主页，顶部显示 modalB。
我尝试了以下方法，其中包含 path 属性的许多变体:

<Route path="#modalB" component={modalB}/>

但没有任何作用。

在模态“ Controller ”组件内的 React Router 2 中，我会使用:

browserHistory.listen( (location) => { //do something with loction.hash })

我希望在 V4 中有更优雅的东西

Answer 1

不是开箱即用的，但 React Router 4 的美妙之处在于它非常容易自己实现。

let HashRoute = ({ component: Component, path, ...routeProps }) => (
  <Route 
    {...routeProps}
    component={({ location, ...props }) =>
      location.hash === path && <Component {...props} />
    }
  />
)

<HashRoute path="#modalB" component={ModalB} />