当多个斜线路径并显示Uncaught SyntaxError时，React Router呈现空白页面：意外令牌'<'

Question

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import "./scss/common.scss";
import Home from "./views/Home";
import Login from "./views/Login/index";
import SignUp from "./views/SignUp/index";
import TwitterSingupCallback from "./views/SNS/TwitterSignupCallback/index";
import TwitterLoginCallback from "./views/SNS/TwitterLoginCallback/index";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/sign-up" component={SignUp} />
        <Route exact path="/callback/twitter/signup" component={TwitterSingupCallback} />
        <Route exact path="/callback/twitter/login" component={TwitterLoginCallback} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
};

export default App;

import React, { Component } from "react";
import { connect } from "react-redux";
import "./authLayout.scss";
import Bg from "./bg";
import CompanyNameLogo from "../../common/CompanyNameLogo/index";
import { ToastContainer } from 'react-toastify';
import "./TwitterLoginCallback.scss";
import AuthLayout from "../../../components/layouts/auth/index";
import { CONSTANTS } from "../../../constants";
import { getQueryStringByName } from "../../../helper";
import { authActions } from "../../../redux/actions/auth";
const authType = CONSTANTS.auth.type;

class TwitterLoginCallback extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount = () => {
    let url = window.location.href;
    let oauth_token = getQueryStringByName('oauth_token', url);
    let oauth_verifier = getQueryStringByName('oauth_verifier', url);
    if (oauth_token && oauth_verifier) {
      let params = {
        "type": authType.TWITTER,
        "snsAccessToken": oauth_token,
        "twitterTokenSecret": oauth_verifier
      }
      this.props.loginRequest(params);
    } else {
      window.location.href = CONSTANTS.pageUrls.LOGIN;
    }
  }

  render() {
    return (
       <div className="auth-layout">
        <ToastContainer />
        <Bg />
        <CompanyNameLogo />
        <div className={"wrap-page-container " + (this.props.className || "")}>
          <div className="page-container">
            <div className="inner-div" />
          </div>
          {this.props.children}
        </div>
      </div>
    );
  }
}


function mapStateToProps(state) {
  return {

  };
}

function mapDispatchToProps(dispatch) {
  return {
    loginRequest: params => dispatch(authActions.loginRequest(params))
  };
}


export default connect(mapStateToProps, mapDispatchToProps)(TwitterLoginCallback);

s3中的localhost：3000 / login和mydomain.com/login运行正常。

localhost：3000 / callback / twitter / login在哪里也可以正常工作

在s3 mydomain.com/callback/twitter/login中显示空白页面，并在控制台中显示“ Uncaught SyntaxError：Unexpected token'<'”错误。

我尝试了其他查询的一些解决方案，但问题未解决。请帮忙。

Answer 1

您需要改进的几件事：

1. 在mapStateToProps中返回状态

function mapStateToProps(state) { return state; }

1. 在第二个屏幕快照中将其包装在div或React.Fragment周围。

{this.props.children}变为<div>{this.props.children}</div>