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

发布时间：2020-12-15 09:32:59 所属栏目：百科来源：网络整理

导读：在我的应用程序中,我想将路径和哈希匹配到不同的组件.例如： /pageA#modalB 将PageA显示为主页面,将modalB放在顶部. 我尝试了以下内容,路径属性有很多变化： Route path="#modalB" component={modalB}/ 但没有任何作用. 在模态’controller’组件内的React R

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

/pageA#modalB

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

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

但没有任何作用.

在模态’controller’组件内的React Router 2中,我会使用：

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

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

解决方法

不是开箱即用,但React Router 4的优点在于它自己实现起来非常容易.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!