如何让#urls在React中保存组件应用程序状态?

时间:2017-07-10 01:21:43

标签: javascript reactjs react-router react-router-v4

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

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

2)点击投资组合

3)刷新

预期

投资组合组件重新呈现

结果

应用程序中断(我知道这是因为我错过了#)

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 个答案:

答案 0 :(得分:1)

感谢@HenriqueOeckslerBertoldi

使用import matplotlib.pyplot as plt import numpy as np import pandas as pd df = pd.DataFrame({"id":["ssa", "ssb", "ssc", "xxa", "xxb", "xxc"], "mean":[1.3,1.5,5.2,3.1,2.1,3.2], "sd":[0.9,0.5,0.3,0.1,0.2,0.3]}) fig, ax = plt.subplots() size_scaler = 300 # Your points will be too small if you just use sd ax.scatter(np.arange(len(df['id'])), df['mean'], s=df['sd']*size_scaler, marker='o') ax.xaxis.set_ticks(np.arange(len(df['id']))) ax.xaxis.set_ticklabels(df['id'], rotation=90) plt.xlabel("id") plt.ylabel("mean") plt.show() 解决了我的问题(请参阅the docs

HashRouter