如何使用历史记录传递变量来与Router一起正常使用?

时间:2018-11-07 02:34:47

标签: javascript react-router history.js

我正在设计一个网站,就像Facebook或我认为可以正常工作的其他任何网站(公开:我是Web编程的新手),我想做的是路由到不同的路由,但其中一个路线,甚至更多,例如,当我转到新页面时,我需要将信息传递给下一个屏幕路线: 然后转到状态www.website.com/page1/page2),同时通过该州传递数据时说我想传递日期或名称,但我不希望它显示在url中。所以我发现react可以通过:

<Link {to={pathname:"/page2", state:{statetopass:datatopass}}}>

但是,当我进入(www.website.com/page1/page2)并通过状态时,只有刷新后我才能读取数据,我觉得很奇怪,我永远也看不到数据通过了,我读到历史是可变的,但我无法真正理解这可能与我的问题有关。 到目前为止,我尝试过的代码在这里:

<-------------------- APP ------------------------- ->

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, IndexRoute, HashRouter } from 'react-router-dom';
import Page1 from './Page1'
import Page2 from './Page2'
import { createBrowserHistory } from "history";
const history = createBrowserHistory();//idk if history should be here seems
class App extends Component {//to make no difference
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path='/hom/Page1' component={({ match }) => { return (<Page1 />) }} />
          <Route exact path='/hom/Page1/Page2' component={({ match }) => { return (<Page2 />) }} />
        </Switch>
      </Router>
    )
  }
}
export default App;

<-------------------- Page1 ----------------->

    import React, { Component } from 'react';
import { Link } from 'react-router-dom'

class Page1 extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <div>
                <Link to={{
                    pathname: `Page1/Page2`,
                    state: { dataneed: "testme" }
                }}><button>Check </button>
                </Link>
            </div>
        )
    }
}
export default Page1;

<------------------------------- Page2 -------------- --------------->

import React, { Component } from 'react';
import { createBrowserHistory } from "history";


const history = createBrowserHistory();

class Page2 extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        console.log(history.location.state.dataneed)
        return (
            <div>

                    <h1>{history.location.state.dataneed}</h1>

            </div>
        )
    }
}
export default Page2;

因此,您首先会看到一个错误,但是一旦刷新,就会看到正在显示的文本。如果有人可以提出我正在尝试的最佳方法,并且如果有人可以帮助我阐明这件事,我将不胜感激。 PS:我使用的是4.3.1版本,那里有视频,但是那些似乎使用的版本低于4.0,并且完全不同。

1 个答案:

答案 0 :(得分:0)

我相信这里的问题是React Router和History包的混合。 React Router使用历史记录,并且在其路由器中内置了历史记录,因此无需显式使用createBrowserHistory或历史记录中的任何内容。具体来说,问题是state从React Router传递到Link,但是随后您尝试从createBrowserHistory()对象访问数据。

要解决此问题并使代码更整洁,您可以采取的措施基本上是不直接使用createBrowserHistory,而是依靠React Router的内置历史记录。可以通过props.locationprops.historyprops.match访问路由数据,这些数据从React Router注入到包裹在高阶组件withRouter中的任何组件中。

它将是什么样子:

在index.js中:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), document.getElementById('root'));

在App.js中:

import React, { Component } from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import Page1 from './Page1'
import Page2 from './Page2'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
    return (
      {/* Note no need for a Router because we wrapped the App component in the BrowserRouter in index.js */}
      <Switch>
        {/* Note the component attribute can be simplified */}
        <Route exact path='/hom/Page1' component={ Page1 } />
        <Route exact path='/hom/Page1/Page2' component={ Page2 } />
      </Switch>
    )
  }
}
export default withRouter(App);

第1页很好。

在第2页中:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Page2 extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    const { dataneed } = this.props.location.state;

    return (
      <div>
        <h1>{ dataneed }</h1>
      </div>
    )
  }
}
export default withRouter(Page2);

希望这会有所帮助,如果您有任何疑问,请告诉我!