Перенаправление с использованием React Router показывает пустую страницу - PullRequest
Новая
       20

Перенаправление с использованием React Router показывает пустую страницу

2 голосов
/ 07 июня 2019

Я пытаюсь создать простой пример проекта, где пользователь перенаправляется на страницу «контакт» после нажатия кнопки, используя React. Я пытаюсь добиться этого, устанавливая значение государственной собственности. Когда я запускаю код, который у меня есть, он меняет 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;

Использование состояния на самом деле не является обязательным требованием для меня, так что другие (желательно более простые) методы перенаправления также приветствуются.

1 Ответ

2 голосов
/ 07 июня 2019

Поскольку ваша кнопка - не что иное, как ссылка, вы можете заменить ее на: 

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

Однако существует множество альтернатив, например, вы можете посмотреть в browserHistory BrowserRouter * 

import { browserHistory } from 'react-router'

browserHistory.push("/contact")

Или, возможно, this.props.history.push("/contact").

У каждого метода есть свои плюсы и минусы, вам придется изучить каждый и увидеть, какой вы предпочитаете.

...