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

Question

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

/pageA#modalB

将PageA显示为主页面,将modalB放在顶部.我尝试了以下内容,路径属性有很多变化:

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

Answer 2

只要您不需要在 HashRoute 中使用 render 或 children 道具，@azium 答案就可以正常工作。在这种情况下，此解决方案会更好地工作：

import React from 'react';
import { Route } from 'react-router-dom';

const HashRoute = ({ hash, ...routeProps }) => (
  <Route
    render={({ location }) => (
      (location.hash === hash) && <Route {...routeProps} />
    )}
  />
);

export default HashRoute;

像这样使用它：

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

或者将它与路由匹配结合起来：

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