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

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

多谢各位

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"));

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>
        );
    }
}

从“React”导入React；
从“react dom”导入react dom；
从“/Welcome”导入欢迎信息；
从“/App”导入{App}；
从“react redux”导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“redux承诺”导入redux承诺；
从“redux devtools扩展”导入{composeWithDevTools}；
从“/reducer”导入减速机；
const store=createStore(
减速器，
带有开发工具的组件（applyMiddleware（reduxPromise））
);
let元素；
如果（location.pathname==“/welcome”）{
元素=；
}否则{
init（商店）；
元素=(
);
}
render（元素、文档、查询选择器（“main”）；

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

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>
        );
    }
}

从“React”导入React；
从“/Register”导入寄存器；
从“/Login”导入登录名；
从“react router dom”导入{HashRouter，Route，Redirect}；
导出默认类Welcome.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}

登录组件

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>
        );
    }
}

从“React”导入React；
从“/axios”导入axios；
导出默认类登录扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={error:false}；
this.loginButton=this.loginButton.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
登录按钮（e）{
e、 预防默认值（）；
axios
.post（“/login”，此.state）
。然后（res=>{
if（res.data.success）{
位置。替换（“/main”）；
}否则{
这是我的国家({
错误：正确
});
}
})
.catch（错误=>console.log（错误））；
}
手变（e）{
这是我的国家(
{
[e.target.name]：e.target.value
},
（）=>console.log（“this.state:，this.state”）
);
}
render（）{
返回(
{this.state.error&&Ops！出了问题。}
凯西与鲁道夫
亲爱的客人，请先登录
用户名
密码
登录
有关用户名和密码的信息可在“保存日期”卡上找到
);
}
}

索引组件（主）

从“React”导入React；
导出默认类Main扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={error:false}；
}
渲染（）{
返回(
婚礼

rpsv

联系我们

结婚礼物

{this.state.error&&Ops！出了问题。}
保存日期
);
}
}

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>
        );
    }
}

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Link}；
从“/Main”导入Main；
导出类应用程序扩展React.Component{
构造函数（）{
超级（）；
this.state={}；
}
render（）{
返回(
);
}
}

位置。替换（“/main”）

我认为这行代码是错误的。

当您使用React时，您更愿意使用React路由器dom的功能，而不是浏览器的内置功能。
将行更改为
this.props.history.push（'/main'）
给出您的文件结构。您的组件
登录
不在
浏览器路由器
中，但必须在其中。检查官方样本：.
而不是

location.replace("/main");

使用

您似乎没有在任何地方使用
登录
组件。。。（在主应用程序或应用程序中）我是！我将把这段代码添加到我的实际问题中。问题可能确实存在。好球！您的问题肯定源于使用两个路由器
HashRouter
和
BrowserRouter
——这没有任何意义。您还将哈希路由器安装在
/welcome
路由上，这解释了您逃避该路由的困难。我的建议是：试着将所有的路由逻辑折叠到一个路由器中（我不太在乎哪个，但我更喜欢
BrowserRouter
），并尽最大努力远离Redux，直到你确定自己需要它（就像你在跟踪状态时遇到问题一样），因为从目前的情况来看，你可能不需要。是的，我认为这也是问题所在。我以前更改过这一行，唯一发生的事情是URL更改为welcome#/main而不是/main。可能问题出在另一块代码/组件上。多谢各位@LuisaSilva你试过这个了吗。道具。历史。推（'../main'）是的！我试过这个.props.history.push（'../main'）、这个.props.history.push（'/main'）和这个.props.history.push（'/main'），但没有成功。嘿！它在里面，真的