如何正确使用 Router 使用 history 来传递变量？

Question

我正在设计一个网站，就像 facebook 或我认为可行的任何其他网站一样（披露：我是网络编程的新手），我想做的是路由到不同的路由，但在一个我的路线甚至更多我需要将信息传递到下一个屏幕路线，例如，当我进入新页面时：（我在 www.website.com/page1 然后移动到 www.website.com/page1/page2) 同时通过状态传递数据说我想传递日期或名称但我不想要它显示在 url 中。所以我发现反应可以通过：

<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;

<--------------------第1页---------------->

    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;

<--------------------------------第2页------------ ------------------>

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，而且完全不同。

Answer 1

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

要解决此问题并使代码更简洁，您可以做的基本上是不直接使用 createBrowserHistory，而是依赖 React Router 的内置历史记录。路由数据可以通过 props.location、props.history 和 props.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);

Page1 没问题。

第 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);

希望这对您有所帮助，如果您有任何问题，请告诉我！

如何正确使用 Router 使用 history 来传递变量？

How to properly work with Router using history to pass variables?

javascript

react-router

history.js