Question

我正在尝试将用户重定向到他来自的位置，然后转到Login组件。实际上，实际上，我很高兴只是重定向到一个已知的网址。在这种情况下，＆＃39; / dashboard＆＃39;。

我的应用程序以app.js开头，路由定义为：

render() {
        return (
            <div>
                <Router>
                    <div>
                    <Navbar />
                        <Route exact path='/' component={Home}  />
                        <Route path='/about' component={About} />
                        <Route path='/contact' component={Contact} />
                        <Route path="/login" component={Login} />
                        <Route path="/register" component={Register} /> 
                        <Route path="/profile" component={Profile} />
                        <Route path="/dashboard" component={Dashboard} />
                        <Route path="/accounts" component={AccountList} />
                        <Route path="/account" component={Account}/>
                    </div>
                </Router>
            </div>
        )
    }

我已导航到Login，用户已输入其凭据。我已经验证了WebAPI调用，并取得了成功..所以我想重定向。

我这样做：

message = "Welcome, " + Auth.Auth.firstname();
history.push("/dashboard");

我的登录屏幕导入包含：

import history from '../../helpers/history.js';

其中history.js只是：

import createHistory from 'history/createHashHistory'
export default createHistory();

执行推送，但屏幕不刷新。该网址只会更新为：

http://localhost:8080/login#/dashboard

如果我点击我的＆＃39;信息中心＆＃39;导航按钮，URL更改为：

http://localhost:8080/dashboard

我的屏幕加载仪表板。

当我需要时，我应该如何重定向，有问题？

Answer 1

您需要将组件withRouter变形，然后使用this.props.history.push('/dashboard')

无需从'../../ helpers / history.js';
导入历史记录

详细了解withRouter

您可以访问历史对象的属性和最近的属性通过withRouter高阶组件进行匹配。 withRouter会将更新后的匹配，位置和历史道具传递给包装的组件，只要它呈现。

import React from "react";
import { withRouter } from "react-router-dom";

class AppA extends React.Component {
  componentDidMount(){
    setTimeout(()=>{
      this.props.history.push("/b");
    },1000)
  }
  render() {
    return (
      <div>
        <h1> Component A will redirect after 1 sec </h1>
      </div>
    )
  }
}
export default withRouter(AppA);

react-router 4并以编程方式重定向

1 个答案: