Question

我是React的新手。我的情况是这样的：

我在React中有一个页面，但React浏览器历史记录使所有网址都必须有＃符号，因此网址如下：http://www.somedomain.com/path/#/login。我需要将此网址发送到第三方网址以进行回调，例如：http://www.thirdparty.com/verify?callback=http%3A%2F%2Fwww.somedomain.com%2Fpath%2F%23%2Flogin。问题是他们不允许在网址中使用＃。他们允许的唯一网址格式就像http://www.somedomain.com/path/login，因此他们会在网址后添加一些参数，最后他们会回调http://www.somedomain.com/path/login?code=something&state=somestate。

我想知道如何实现这一目标？接受每个可能的解决方案，包括Apache或Nginx url重写，不限于React路由器解决方案。提前谢谢！

我的代码如下：

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>
    );
  }
}

Answer 1

您应该使用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"));

如何制作没有井号的React路由器？

1 个答案: