Как правильно работать с маршрутизатором, используя историю для передачи переменных? - PullRequest
Новая
       26

Как правильно работать с маршрутизатором, используя историю для передачи переменных?

0 голосов
/ 07 ноября 2018

Я создаю веб-сайт, который похож на 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;

<-------------------- 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 голосов
/ 07 ноября 2018

Я полагаю, что проблема заключается в сочетании React Router и пакета History. React Router использует History и имеет встроенную историю в своих маршрутизаторах, поэтому нет необходимости явно использовать createBrowserHistory или что-либо непосредственно из History. В частности, проблема в том, что state передается в Link от React Router, но затем вы пытаетесь получить доступ к данным из объекта createBrowserHistory().

Что вы можете сделать, чтобы решить эту проблему и сделать ваш код немного чище, в основном не использовать createBrowserHistory напрямую, а вместо этого полагаться на встроенную историю из React Router. К данным маршрутизации можно получить доступ через props.location, props.history и props.match, которые вводятся в любой компонент, включенный в компонент высшего порядка withRouter, из React Router.

Как это будет выглядеть:

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

Надеюсь, это поможет, дайте мне знать, если у вас есть вопросы!

...