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

问题

I'm designing a website that just like facebook or anyother website that I seen I assume works (disclosure: I'm new to web programing), what I want to do is to route to different routes but in one of my routes or possibly even more I need to pass info to the next screen route when I to the new page for example: (I'm in www.website.com/page1 then move to www.website.com/page1/page2) whilst passing data through the state say I want to pass a date or a name but I would not want it to be shown in url. So I found that react can pass with:

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

However,when I do pass the state once I'm in (www.website.com/page1/page2) I'm unable to read the data only when I refresh which i find weird will I ever see the data passed, I read that history is mutable but I can't really understand what that means its probably something to do with what my problem is. The code that I have tried so far is here:

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

So you will see that at first you get an error but then once you refresh you see the text being displayed. If anyone could suggest the best way to go about doing whta I'm trying and if anyone could help me shed some light on the matter I would greatly appreciate this. PS: I'm using 4.3.1 version there are videos out there but those seem to use version lower than 4.0 and completely different.

回答1:

I believe the issue here is the mix of React Router and the History package. React Router uses History and has a history built in to its routers, so there is no need to explicitly use createBrowserHistory or anything from History directly. Specifically the issue is that the state is passed to the Link, from React Router, but then you attempt to access the data from the createBrowserHistory() object.

What you can do to resolve this issue and keep your code a bit cleaner is basically not use createBrowserHistory directly and instead rely on the built-in history from React Router. The routing data can be accessed through props.location, props.history, and props.match, which are injected into any component wrapped in the higher-order component withRouter from React Router.

What this will look like:

In 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'));

In 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 is fine.

In Page2:

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

Hopefully this helps, let me know if you have questions!

来源：https://stackoverflow.com/questions/53182871/how-to-properly-work-with-router-using-history-to-pass-variables

标签

javascript

react-router

history.js