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

Question

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

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

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

Answer 1

我为这种情况找到了解决方案。它的灵感来自stackOverflow 中的这个问题。对 Route 使用 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>
    );
  }
}