Question

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

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

App.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;

Contact.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）来处理。

该示例已在{strong> package.json 文件的"react": "^16.13.1"部分中用"react-router-dom": "^5.2.0"，"history": "^5.0.0"和"dependecies"进行了测试。

在App.js中，我的住所和联系方式为BrowserRouter（通常人们导入BrowserRouter as Router，我更喜欢使用原始名称）。

App.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的{{1}}放在path="/contact"之前，因为path="/"呈现了第一个匹配项，因此将{ {1}}结尾。如果您有Switch和Home，请在此之前放置更具体的路线（在这种情况下为path="/something"）。（https://reactrouter.com/web/api/Switch）

ASIDE 2 ：我正在使用类组件，但我相信（我没有对其进行测试）功能组件也可以使用。

在Home.js和Contact.js中，我使用与path="/something/:id"关键字关联的/:id。这使得Home和Contact组件通过withRouter接收export的{{1}}对象。使用方法history将“ / contact”和“ /”添加到历史记录堆栈。（https://reactrouter.com/web/api/history）。

Home.js

BrowserRouter

Contact.js

props

特别是，我还在push()的{{1}}组件中使用了向后导航：

BackButton.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 );

所以我可以将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 );修改为：

Contact.js （带有BackButton）

BackButton

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

useHistory Hook（https://reactrouter.com/web/api/Hooks）
使用goBack()代替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 );-（https://reactrouter.com/web/api/Router）

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

2 个答案: