是否可以匹配 React Router 5 中任何路由的 # 部分？

Question

在我的应用中，我想匹配所有以#something 结尾的路由。

   /map#login
   /info#login
and
   /map#register
   /map/one#register
   /info#register
   /info/two#register

所以我可以将组件显示为内容顶部的弹出窗口。如何做到这一点？

Answer 1

我找到了这个案例的解决方案。它的灵感来自 。对路由使用 HashRoute 包装器并显示基于 location.hash.

的组件

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

export default class App extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div className='App'>
        <Router history={history}>
            <HashRoute hash='#login'component={Login} />
            <HashRoute hash='#register' component={Register} />

            <Switch>
              <Route exact path='/map' component={Map} />
              <Route exact path='/info' component={Info} />
            </Switch>
        </Router>
      </div>
    );
  }
}