Блог

Я новичок в React. Моя ситуация такая:

У меня есть страница в React, но в истории браузера React все URL-адреса должны иметь знак #, поэтому URL-адрес выглядит следующим образом: http://www.somedomain.com/path/#/login . Мне нужно отправить этот URL-адрес на сторонний URL-адрес для обратного вызова, например: http://www.thirdparty.com/verify?callback=http://www.somedomain.com/path/#/login . Проблема в том, что они не разрешают # в URL. Единственный формат URL, который они допускают, похож на http://www.somedomain.com/path/login , так что затем они добавят какой-нибудь параметр после URL-адреса, и, наконец, они выполнят обратный вызов http://www.somedomain.com/path/login?code=somethingamp;state=somestate .

Мне интересно, как я могу этого добиться? Принимаются все возможные решения, включая переписывание URL-адресов Apache или Nginx, не ограничиваясь решением React router. Заранее благодарю вас!

Мой код выглядит следующим образом:

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });
    return (
      <Router history={appHistory}>
        <Route path="/" component={Main}>
          <IndexRoute component={Home} />
          <Route path="login" component={Login} />
          <Route path="mypics" component={MyPics} onEnter={requireAuth} />
        </Route>
      </Router>
    );
  }
}
  

Вы должны использовать browserHistory в качестве поставщика истории.

 import React from "react";
import ReactDOM from "react-dom";

import { Router, Route, browserHistory } from "react-router";

class App extends React.Component {
    render() {
        return (
            <Router history={browserHistory}>
                <Route path="/" component={...}>
                    ...
                </Route>
            </Router>
        );
    }
}

// Render the main component into the dom
ReactDOM.render(<App />, document.getElementById("app"));