Question

我想与react-router-dom重定向。这就是我到目前为止所做的事情：

export function login() {
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then(() => {
                document.getElementById('close').click();
                document.getElementById('questions').click();
            }
        ).catch(e => console.log(e));
}

所以我只是点击链接将用户重定向到我需要的位置。但是代码改变了，这已经不再适用了。到目前为止，我使用Express为节点工作，重定向由一个简单的res.redirect('path');完成。

我做了一些研究，但在我的问题中看不到任何当前的答案。现在应该如何完成？我尝试过使用历史记录，但这已被弃用了。我看到像withRouter这样的东西，最后一行总是把我扔掉：

const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

来自here

的示例

我的情况也没有上课。它只是一个导出的方法，因此没有构造函数或render()方法。

Answer 1

React路由器有redirect element，您可以在登录完成后有条件地呈现。

这将需要一个渲染，你说你没有，你可以做的是创建一个登录组件：

class Login extends Component {
  state = {
    loggedIn: false
  };

  componentDidMount() {
    yourLoginFunction().then(() => this.setState({loggedIn: true});
  }

  render() {
    const {loggedIn} = this.state;
    if(loggedIn) {
      return <Redirect to="/post/login/path" />
    } else {
      return <div>login in progress...</div>;
    }
  }
}

Answer 2

对我的React项目有用：

在顶部：

import PropTypes from 'prop-types';
import {withRouter} from 'react-router-dom';

在课堂上：

  static propTypes = {
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
};

重定向：

this.props.history.push('/');

在文件的底部：

export default withRouter(CourseDetail);

Answer 3

如果您有基于类的组件或类似的东西，您可以使用react路由器。如果你有一个类似你的登录示例的功能，我认为你应该使用像window.location = my_new_path

这样的东西

使用React重定向

3 个答案: