使用 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") 。

每种方法都有利有弊，您必须仔细研究每种方法，看看您更喜欢哪种方法。

Answer 2

我是因为类似的情况来到这里的。 可以使用withRouter ( https://reactrouter.com/web/api/withRouter ) 来处理。

此示例使用"react": "^16.13.1" 、 "react-router-dom": "^5.2.0"和"history": "^5.0.0"到package.json 中的"dependecies"部分文件。

在 App.js 中，我有带有 Home 和 Contact 的BrowserRouter （通常人们将BrowserRouter as Router导入，我更喜欢使用原始名称）。

应用程序.js

import React, { Component } from "react";
import {
    BrowserRouter,
    Switch,
    Route,
} from "react-router-dom";
import Home from "./pages/Home";
import Contact from "./pages/Contact";
class App extends Component
{
    // stuff...
    render()
    {
        return (
            <BrowserRouter>
                <Switch>
                    <Route path="/contact">
                        <Contact />
                    </Route>
                    <Route path="/">
                        <Home />
                    </Route>
                </Switch>
            </BrowserRouter>
        );
    }
}
export default App;

ASIDE 1： Route与path="/contact"被放置之前path="/" ，因为Switch使第一匹配，所以把Home在末端。 如果您有path="/something"和path="/something/:id"将更具体的路由（在这种情况下使用/:id放在前面。 ( https://reactrouter.com/web/api/Switch )

旁白 2 ：我正在使用类组件，但我相信（我没有测试过）一个功能组件也可以工作。

在 Home.js 和 Contact.js 中，我使用withRouter与export关键字相关联。 这使得 Home 和 Contact 组件通过props接收BrowserRouter的history对象。 使用方法push()将“/contact”和“/”添加到历史堆栈中。 （ https://reactrouter.com/web/api/history ）。

主页.js

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

export const Home = ( props ) =>
{
    return (
        <div>
            Home!
            <button
                onClick={ () => props.history.push( "/contact" ) }
            >
                Get in Touch
            <button>
        </div>
    );
}
export default withRouter( Home );

联系人.js

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

export const Contact = ( props ) =>
{
    return (
        <div>
            Contact!
            <button
                onClick={ () => props.history.push( "/" ) }
            >
                Go Home
            <button>
        </div>
    );
}
export default withRouter( Contact );

特别是，我还在BackButton组件中使用goBack()向后导航：

返回按钮.js

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

export const BackButton = ( props ) =>
{
    return (
        <button
            onClick={ () => props.history.goBack() }
        >
            Go back
        <button>
    );
}
export default withRouter( BackButton );

所以我可以将Contact修改为：

Contact.js （带后退按钮）

import React from "react";
import BackButton from "../components/BackButton";

export const Contact = ( props ) =>
{
    return (
        <div>
            Contact!
            <BackButton />
        </div>
    );
}
export default Contact; // now I'm not using history in this file.
// the navigation responsability is inside BackButton component.

以上是对我来说最好的解决方案。 其他可能的解决方案是：

• useHistory Hook ( https://reactrouter.com/web/api/Hooks )
• 使用Router代替BrowserRouter - ( https://reactrouter.com/web/api/Router )