Можно ли сопоставить # часть для любого маршрута в React Router 5?

Question

В моем приложении я хотел бы сопоставить все маршруты, заканчивающиеся символом # что-то.

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

Поэтому я могу показывать компонент в виде всплывающего окна поверх содержимого.Как это можно сделать?

Answer 1

Я нашел решение для этого случая.Он был вдохновлен этим вопросом в stackOverflow .Использование оболочки HashRoute для Route и отображение компонента на основе 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>
    );
  }
}