Question

我正在设计一个网站，就像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，并且完全不同。

Answer 1

我相信这里的问题是React Router和History包的混合。 React Router使用历史记录，并且在其路由器中内置了历史记录，因此无需显式使用createBrowserHistory或历史记录中的任何内容。具体来说，问题是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);

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

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

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

1 个答案: