如何在 React 中使用 # urls 来保存组件应用程序状态? [英] How to have # urls to save component app state in React?

问题描述

我们如何在 React(单页应用)中获取 #urls?

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

1) 访问:https://coinhover.io

2) 点击投资组合

3) 刷新

投资组合组件重新渲染

应用程序中断(我知道这是因为我缺少一个 #)

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

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

推荐答案

感谢 @HenriqueOeckslerBertoldi

使用 HashRouter 解决了我的问题(请参阅文档)

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

这篇关于如何在 React 中使用 # urls 来保存组件应用程序状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！