使用 React Router 重定向显示空白页面

Question

我正在尝试构建一个简单的示例项目，其中用户在单击按钮后会使用 React 重定向到“联系”页面。我试图通过设置状态属性的值来实现这一点。当我运行我的代码时，它确实将浏览器地址栏 URL 更改为联系页面的 URL，但似乎并未实际加载该组件 - 我得到的是一个空白页面。如果我手动导航到该 URL ( http://localhost:3000/contact )，我可以看到内容。

这是我的App.js和Contact.js文件 -

应用程序.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';
import Contact from './Contact';

class App extends Component {
    state = {
        redirect: false
    }

    setRedirect = () => {
        this.setState({
            redirect: true
        })
    }

    renderRedirect = () => {
        if (this.state.redirect) {
            return <Redirect to='/contact' />
        }
    }

    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path='/contact' component={Contact} />
                </Switch>
                <div>
                    {this.renderRedirect()}
                    <button onClick={this.setRedirect}>Redirect</button>
                </div>
            </Router>
        )
    }
}

export default App;

联系方式.js

import React, { Component } from 'react';

class Contact extends Component {
    render() {
        return (
            <div>
                <h2>Contact Me</h2>
                <input type="text"></input>
            </div>
        );
    }
}

export default Contact;

使用状态对我来说并不是真正的要求，因此其他（最好是更简单的）重定向方法也将受到赞赏。

Answer 1

由于您的按钮只不过是一个链接，因此您可以将其替换为：

<Link to="/contact">Redirect</Link>

不过，还有很多替代方案，例如您可以查看 BrowserRouter 的browserHistory：

import { browserHistory } from 'react-router'

browserHistory.push("/contact")

也许this.props.history.push("/contact")。

每种方法都有优点和缺点，您必须研究每种方法，看看您更喜欢哪种。