Question

我意识到以前曾有人问过这个问题，请耐心等待，因为我仍在学习。而且我想我已经尝试了所有解决方案，但是都没有运气。

问题是：当PrivateRoute重定向到/sign_in时，它没有呈现预期的组件（SignInForm）

我已经实现了PrivateRoute，如下所示：

PrivateRoute.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Route, Redirect, withRouter } from "react-router-dom";

// Simplified and still can reproduce the issue;
class PrivateRoute extends Route {
  render () {
    return (<Redirect to="/sign_in" />);
  }
}

PrivateRoute.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
};

const mapStateToProps = state => {
  return {
    isAuthenticated: !!state.user.token
  };
};

export default withRouter(connect(mapStateToProps)(PrivateRoute));

这是我使用它的地方；

index.js

<div className="content position-relative">
    <div className="content-container font-nunito">
        <Switch>
            <Route path="/sign_in" component={SignInForm} />
            <Route exact path="/" component={LandingPage} />
            <PrivateRoute path="/trips" component={TestPage} />
        </Switch>
    </div>
</div>

要添加到问题中的几点要点：

我确认重定向确实发生在PrivateRoute中（我通过将to参数更改为另一条路由进行了测试，并且在浏览器中看到了URI更改）。
如果我直接转到/sign_in，它可以正常工作。唯一的问题是只有<Redirect>这样做。
如果无法解决，我的最后一招将是勉强执行本地浏览器重定向。但是，如果可能的话，我想避免这种情况。

这是我以前尝试过的尝试；

在我的withRouter中使用PrivateRoute-基于this answer
根据this answer将PrivateRoute设置为pure-
尝试从Redirect而非withRouter导入react-router和react-router-dom
已安装path-to-regexp@^2.4.0
在push中使用Redirect-基于this answer

我当前正在使用react-router-dom@5.2.0和react@^16.2.0。

请帮助，任何建议，我们将不胜感激。让我知道是否可以提供更多详细信息。

Answer 1

编辑：我发现了真正的问题，似乎所有路线都需要包裹在BrowserRouter内。所以这是我的最终解决方案；

<BrowserRouter>
    <div className="content position-relative">
        <div className="content-container font-nunito">
            <Switch>
                <Route path="/sign_in" component={SignInForm} />
                <Route exact path="/" component={LandingPage} />
                <PrivateRoute path="/trips" component={TestPage} />
            </Switch>
        </div>
    </div>
</BrowserRouter>

旧版本：

我通过将react-router-dom从5.2.0降级为4.3.1来解决了这个问题。

这似乎可以解决问题，但有一些副作用this issue

所以我最后的修改是

package.json

- "react-router-dom": "^5.2.0",
+ "react-router-dom": "^4.3.1",

index.js （为避免产生副作用）

<Switch>
    <Route exact path="/" component={props => <LandingPage {...props} />} />
    <Route path="/sign_in" component={props => <SignInForm {...props} />} />

    <PrivateRoute path="/trips" component={props => <TestPage {...props} />} />
</Switch>

React Router DOM-重定向组件无法正确呈现路由

1 个答案: