ReactJS URL меняется, но не страница с BrowserRouter - PullRequest
Новая
       3

ReactJS URL меняется, но не страница с BrowserRouter

1 голос
/ 08 апреля 2020

Итак, я знаю, что есть много вопросов по этому поводу, и я долго искал решение, но ничего не получается, и я почти новичок в ReactJS ...

Когда я нажимаю на мою кнопку, URL-ссылка меняется, но страница остается прежней. Я пытаюсь создать игру (на самом деле, викторину), в которой есть несколько уровней, поэтому компонент всегда одинаков, но с разными данными.

Чтобы объяснить лучше:

Приложение . js

import React from 'react';
import './App.css';
import {dataSet1, dataSet2} from './data/dataSet.js'
import Quiz from './Quiz.js'
import {BrowserRouter,Switch,Route, Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';


class App extends React.Component {
  render() {
    var style = {
      width: "25%",
      backgroundColor: "green",
      float: "center",
      padding: "12px 28px",
      textAlign: "center",
      color: "white",
    }

    return(
      <div>
        <BrowserRouter>
          <Button style={style} component={Link} to="/level1">Play</Button>
          <Switch>
            <Route exact path="/level1" component={withRouter(Quiz)}>
              <Quiz level={1} data={dataSet1}/>
            </Route>
            <Route path="/level2" component={withRouter(Quiz)}>
              <Quiz level={2} data={dataSet2}/>
            </Route>
          </Switch>  
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

Викторина. js

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, level: props.level, dataSet:props.data, correct:0, incorrect:0}
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.state.dataSet[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.state.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.state.dataSet[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

Когда я нажимаю «Следующий уровень», мой URL меняется на http://localhost: 3000 / level2 , но страница не меняется. Хотя, если я обновлю sh страницу, она будет работать нормально, и моя страница будет отображаться в порядке. Кроме того, если я нажимаю «Воспроизвести», когда я нахожусь в моем маршруте уровня 2, происходит то же самое: URL меняется на http://localhost: 3000 / level1 , но моя страница отображается me level2.

Возобновление:

Я не могу go с level1 с level2 или с level2 с level1 без обновления страницы.

Если кто-то может мне помочь, было бы здорово.

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

ОБНОВЛЕНИЕ:

Мне удалось это исправить, выполнив очень простую вещь с помощью "href".

Итак, я обновил это: 

<Button style={style} component={Link} to={next}>
  Next Level
</Button>

На это: 

<Button href={next} style={style} >
  Next Level
</Button>

И теперь все работает просто отлично!

0 голосов
/ 08 апреля 2020

Есть 2 проблемы, с которыми вы столкнулись здесь.

Во-первых, вы ставите реквизит в состояние. Обычно это не очень хорошая практика, и ее следует избегать, чтобы у вас не возникало подобных проблем. В этом случае совершенно неоправданно переводить props.level и props.data в состояние, потому что вы его вообще не модифицируете).

Второй - это React Router, который является интеллектуальным и предпочитает не перемонтировать ваш составная часть. Вы не указали key реквизит для ваших Route компонентов, что указывало на то, что компоненты Quiz внутри - это одно и то же, поэтому следует менять только реквизиты.

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

Вот решение : Викторина. js

import React from 'react';
import {Link, withRouter} from 'react-router-dom';
import Button from '@material-ui/core/Button';

class Quiz extends React.Component {
    constructor(props) {
        super(props)

        this.state = {current:0, correct:0, incorrect:0} //removed the unnecessary state 
        this.handleClick = this.handleClick.bind(this)

    }

    handleClick(choice) {
        if (choice === this.props.data[this.state.current].correct) {
          this.setState({correct: this.state.correct + 1})
        } else {
          this.setState({incorrect: this.state.incorrect + 1})
        }

        if (this.state.current === 4) { 
            if(this.state.correct + this.state.incorrect === 4){ 
                this.setState({current: this.state.current}) 
            }
            else {
                this.setState({current: 0})
                this.setState({incorrect: 0})
                this.setState({correct: 0})
            }
        } else {
             this.setState({current: this.state.current + 1}) 
        }
      }

      render() { 
        var style = {
            width: "25%",
            display: "block",
            backgroundColor: "green",
            textAlign: "center",
            color: "white"
          }
        if(this.state.current === 4 && this.state.correct === 5 ){
            var l = this.props.level + 1
            var next = '/level' + l
            return(
                <div>
                    <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                    <h3 align="left">Passaste de nível!</h3>
                    <Button style={style} component={Link} to={next}>
                        Next Level
                    </Button>
                </div>
            )
        } 
        else {
            return(
                <div>
                  <ScoreArea correct={this.state.correct} incorrect={this.state.incorrect} />
                  <QuizArea handleClick={this.handleClick} dataSet={this.props.data[this.state.current]} />
                </div>
              )
        }        
      }
}

....

export default withRouter(Quiz);

(Просто заменил все this.state.level на this.props.level и все this.state.dataSet на this.props.data)

Надеюсь, это помогает!

...