Zhang Buzz Zhang Buzz - 2 months ago 22
React JSX Question

How to make React router without pound sign?

I am new to React. My situation is like this:

I have a page in React, but React browser history makes all url must have a # sign, so the url is like this: http://www.somedomain.com/path/#/login. I need to send this url to a third party url for callback, like this: http://www.thirdparty.com/verify?callback=http%3A%2F%2Fwww.somedomain.com%2Fpath%2F%23%2Flogin. The problem is that they do not allow # in the url. The only url format they allow is like http://www.somedomain.com/path/login, so then they will add some parameter after the url, finally they will callback http://www.somedomain.com/path/login?code=something&state=somestate.

I am wondering how can I achieve this? Every possible solution is accepted, including Apache or Nginx url rewriting, not limit to React router solution. Thank you in advance!

My code is as below:

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

You should use browserHistory as history provider.

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"));
Comments