Question

我正在使用React构建一个网站，我试图在登录后将用户重定向到索引页面，但是我的组件没有呈现任何内容，尽管我正在重定向并且可以看到URL从 / welcome＃/ login 到 / main 。由于我没有收到任何错误消息并且Webpack已成功编译，因此我再也看不到问题所在。关于什么可能是错误的任何想法？

非常感谢您！

Start.js

import React from "react";
import ReactDOM from "react-dom";
import Welcome from "./welcome";
import { App } from "./app";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import reduxPromise from "redux-promise";
import { composeWithDevTools } from "redux-devtools-extension";
import reducer from "./reducer";

const store = createStore(
    reducer,
    composeWithDevTools(applyMiddleware(reduxPromise))
);

let element;

if (location.pathname === "/welcome") {
    element = <Welcome />;
} else {
    init(store);
    element = (
        <Provider store={store}>
            <App />
        </Provider>
    );
}

ReactDOM.render(element, document.querySelector("main"));

Welcome.js

import React from "react";
import Register from "./register";
import Login from "./login";
import { HashRouter, Route, Redirect } from "react-router-dom";

export default class Welcome extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <HashRouter>
                <div className="register-wrapper">
                    <div>
                    <Route path="/login" component={Login} />
                    <Route exact path="/" component={Register} />
                    </div>
                </div>
            </HashRouter>
        );
    }
}

登录组件

import React from "react";
import axios from "./axios";

export default class Login extends React.Component {

    constructor(props) {

        super(props);
        this.state = { error: false };
        this.loginButton = this.loginButton.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    loginButton(e) {
        e.preventDefault();
        axios
            .post("/login", this.state)
            .then(res => {
                if (res.data.success) {
                    location.replace("/main");
                } else {
                    this.setState({
                        error: true
                    });
                }
            })
            .catch(error => console.log(error));
    }

    handleChange(e) {

        this.setState(
            {
                [e.target.name]: e.target.value
            },
            () => console.log("this.state:", this.state)
        );
    }

    render() {
        return (
            <div className="login-main-container">

                {this.state.error && <h2>Ops! Something went wrong.</h2>}

                <h1 className="login-title">Kathi & Rodolfo</h1>
                <h2 className="login-subtitle">Dear guest, please login first</h2>

                <div className="login-container">
                    <form className="login-form">
                        <label className="label-login" htmlFor="email"> username </label>
                        <input className="input-login"

                            name="email"
                            placeholder="Best Couple You Know"
                            onChange={this.handleChange}
                        />
                        <label className="label-login" htmlFor="password"> password </label>
                        <input className="input-login"
                            name="password"
                            type="password"
                            placeholder="Super Loving Password"
                            onChange={this.handleChange}
                        />

                        <button
                            className="login-button"
                            onClick={this.loginButton}
                        >
                            Login
                        </button>
                    </form>
                </div>
                <h4 className="login-info">Information about username and password can be found on the Save The Date card</h4>

            </div>
        );
    }
}

索引组件（主要）

import React from "react";

export default class Main extends React.Component {
    constructor(props) {
        super(props);

        this.state ={ error: false};
    }

    render () {
        return (
            <div className="main-container"> 
                <header>
                    <p>the wedding</p>
                    <p>rpsv</p>
                    <p>contact us</p>
                    <p>wedding gift</p>
                </header>

                {this.state.error && <h2>Ops! Something went wrong.</h2>}

                <div className="save-the-date-img">
                    <h1>Save The Date</h1>
                </div>

            </div>
        );
    }
}

App.js

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
import Main from "./main";

export class App extends React.Component {
    constructor() {
        super();
        this.state = {};
    }

    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route exact path="/main" Component={Main}/>
                </div>
            </BrowserRouter>
        );
    }
}

Answer 1

location.replace("/main");
我认为这行在您的代码中是错误的。
在使用React时，您宁愿使用react-router-dom的功能，也不愿使用浏览器的内置功能。将行更改为this.props.history.push('/main')

Answer 2

提供文件结构。您的组件Login不在BrowserRouter中，但必须存在。查看官方示例：https://reacttraining.com/react-router/web/guides/quick-start。

Answer 3

代替

location.replace("/main");

使用

history.push("/main")

React Router：登录后组件未呈现

3 个答案: