时间戳

首页 > 解决方案 > 来自 React v4 中事件处理程序的 URL 重定向

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

问题描述

我是 React 新手，在使用 JavaScript 事件处理程序重定向到新页面时遇到问题。我不知道我做错了什么。

应用程序.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.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/>课程但无济于事。

标签： javascriptreactjsreact-router

解决方案

Redirect组件需要被渲染而不是返回到 onClick 处理程序，这就是它不工作的原因。你可以history.push改用

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

推荐阅读