Как у вас есть # URL-адреса для сохранения состояния компонента приложения в React?

Как мы получаем #urls в React (одностраничное приложение)?

1) Посетите: https://coinhover.io

2) Нажмите "Портфолио"

3) Обновить

Ожидаемые

Компонент Portfolio переопределяет

Результаты

Приложение разбивается (я знаю, это потому, что я пропускаю #)


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

Благодаря @HenriqueOeckslerBertoldi

С помощью HashRouter исправлена ​​проблема

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