Перенаправление URL-адресов из обработчиков событий в React v4

Я новичок в React, и у меня возникла проблема с перенаправлением на новую страницу с помощью обработчиков событий JavaScript. Я не знаю, что я не понимаю.

App.js

import React, { Component } from 'react';
import {Switch, Route} from 'react-router-dom';

import Nav, {Jumbotron} from '../partials/headobjs';
import Footer from '../partials/footer';
import Users from '../components/user';
import UserObj from '../components/userobj';
import Err404 from '../components/err404';

//import css files.. 
import '../css/styles.css';


class App extends Component {
  render() {
    return (
      <div>
          <Nav />      
          <Jumbotron/>   

          <Switch>
            <Route exact path='/' component = {Users}/>
            <Route path='/user' component = {UserObj}/>
            <Route component = {Err404} />
          </Switch>

          <div className='clr'></div>

          <Footer />
      </div>      
    );
  }
}

export default App;

Пользователи.js

import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';

class Users extends Component {

  constructor(){
    super();
    this.state = { 
      name:aminu
    };
  }

  gotoURL(usr){
    let url = `/user/${usr}`;
    //console.info(url);
    return <Redirect to = {url}/>
  }

  render() {    
     return (    
        <div className = "container">
             <button onClick = {this.gotoURL.bind(this, this.state.name)}>
               Go to {this.state.name} page
            </button>
        </div>
    );
  }
}

export default Users;

Я хочу, чтобы функция gotoURL перенаправляла на новый маршрут, но я не уверен, что я делаю неправильно, я пробовал использовать browserHistory, а теперь пробую класс <Redirect/>, но пока безрезультатно.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
3 169
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Redirect компонент должен быть отрендерен, а не возвращен в обработчик onClick, поэтому он не работает. Вместо этого вы можете использовать history.push

gotoURL(usr){
    let url = `/user/${usr}`;
    //console.info(url);
    this.props.history.push(url);
  }

так просто, почему я не наткнулся на это, спасибо, босс .. работает ..

Ande Caleb 08.04.2019 14:28

Рад, что помог :)

Shubham Khatri 08.04.2019 15:13

Вместо перенаправления из функции используйте метод рендеринга и состояние для решения проблемы redirect.

class Users extends Component {

    constructor(){
        super();
        this.state = {
            name:'aminu',
            toUser: false
        };
    }

    gotoURL(usr){
        let url = `/user/${usr}`;
        //console.info(url);
        this.setState({toUser:true, goto: url})
    }

    render() {

        if (this.state.toUser === true) {
            return <Redirect to = {this.state.goto}/>
        }

        return (
            <div className = "container">
                <button onClick = {this.gotoURL.bind(this, this.state.name)}>
                    Go to {this.state.name} page
                </button>
            </div>
        );
    }
}

Вы можете использовать компонент Link из react-v4, чтобы изменить свой маршрут.

import { Link } from 'react-router-dom';

<div className = "container">
    <Link to = {`/user/${usr}`}
        <button>
          Go to {this.state.name} page
        </button>
    </Link>
</div>

Другие вопросы по теме