React路由器：登录后组件未呈现

Question

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

非常感谢！

开始.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"));

欢迎.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>
        );
    }
}

应用程序.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")