Javascript 如何使用#URL在React中保存组件应用程序状态？

我们如何在React（单页应用程序）中获取URL

1） 访问：

2） 点击公文包

3） 刷新

预期 公文包组件重新呈现

结果 应用程序坏了（我知道这是因为我缺少一个#）

---

App.js

从“React”导入React
从“react redux”导入{connect}
从“react Router dom”导入{BrowserRouter as Router}
从“./components/Routes”导入路由
window.history中的const supportsHistory=“pushState”
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认连接（空，空）（应用程序）

Routes.js

从“React”导入React
从“react router dom”导入{browserHistory，BrowserRouter，hashHistory，Route，Switch}
从“./Portfolio/Portfolio”导入投资组合
从“./Home/Home”导入主页
从“./NoMatch”导入NoMatch
常数路由=（）=>{
返回(
);
}
导出默认路由

多亏了

使用

HashRouter

修复了我的问题（请参阅）

从“React”导入React
从“react router dom”导入{browserHistory，HashRouter，Route，Switch}
从“./Portfolio/Portfolio”导入投资组合
从“./Home/Home”导入主页
从“./NoMatch”导入NoMatch
常数路由=（）=>{
返回(
);
}
导出默认路由

您的服务器如何为页面提供服务？似乎刷新浏览器试图加载

https://coinhover.io/portfolio

从服务器上，由于它在该路线上不提供任何服务，您将获得404。我知道，但该页面正在以某种方式提供服务。你是怎么做到的？我同意@Leon Gaban的观点。你缺少一点反应路由器的概念，呵呵。这里（）我给出了一些解释和链接来解决您的问题（可能）。（我写在这里是因为我还不能发表评论：P）。@HenriqueOeckslerBertoldi，伙计，就是这样！哈哈，我只需要HashRouter，你想发布你的答案吗？我刚把BrowserRouter换成了HashRouter@LeonGaban你的设计是好男人哈哈

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)

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

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