How to have # urls to save component app state in React?

问题

How do we get #urls in React (single-page app)?

1) Visit: https://coinhover.io

2) Click on Portfolio

3) Refresh

Expected

The Portfolio component re-renders

Results

The app breaks (I know this is because I'm missing a #)

App.js

import React from 'react'
import { connect } from 'react-redux'
import { BrowserRouter as Router } from 'react-router-dom'
import Routes from './components/Routes'

const supportsHistory = "pushState" in window.history

class App extends React.Component {
    render() {
        return (
            <Router forceRefresh={!supportsHistory}>
                <Routes />
            </Router>
        );
    }
}

export default connect(null, null)(App)

Routes.js

import React from 'react'
import { browserHistory, BrowserRouter, hashHistory, Route, Switch } from 'react-router-dom'
import Portfolio from './portfolio/Portfolio'
import Home from './home/Home'
import NoMatch from './NoMatch'

const Routes = () => {
    return (
        <BrowserRouter history={ browserHistory }>
            <Switch>
                <Route exact={ true } path="/" component={ Home }/>
                <Route exact={ true } path="/portfolio" component={ Portfolio }/>
                <Route component={ NoMatch } />
            </Switch>
        </BrowserRouter>
    );
}

export default Routes

回答1:

Thanks to @HenriqueOeckslerBertoldi

Using HashRouter fixed my problem (see the docs)

import React from 'react'
import { browserHistory, HashRouter, Route, Switch } from 'react-router-dom'
import Portfolio from './portfolio/Portfolio'
import Home from './home/Home'
import NoMatch from './NoMatch'

const Routes = () => {
    return (
        <HashRouter history={ browserHistory }>
            <Switch>
                <Route exact={ true } path="/" component={ Home }/>
                <Route exact={ true } path="/portfolio" component={ Portfolio }/>
                <Route component={ NoMatch } />
            </Switch>
        </HashRouter>
    );
}

export default Routes

来源：https://stackoverflow.com/questions/45002573/how-to-have-urls-to-save-component-app-state-in-react

标签

javascript

reactjs

react-router

react-router-v4