来自React v4中事件处理程序的URL重定向

Question

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

Users.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.log(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/>该类，但无济于事。

Answer 1

Redirect组件需要呈现而不返回到onClick处理程序，这就是它不起作用的原因。您可以history.push代替gotoURL(usr){&nbsp; &nbsp; let url = `/user/${usr}`;&nbsp; &nbsp; //console.log(url);&nbsp; &nbsp; this.props.history.push(url);&nbsp; }