React路由器DOM-重定向组件不能正确呈现路由

Question

我意识到以前有人问过我这个问题，请容忍我，因为我还在学习这个问题。我想我已经尝试了所有的解决方案，但是没有运气。

问题是：当privaterout重定向到/sign\u in时，它没有呈现预期的组件（signinfo）

我已经实现了一个privaterout，如下所示；

privaterout.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>

在这个问题中要补充几点：

1. 我确认重定向确实发生在PrivateRoute（我通过将更改为参数并将其更改为另一个路由来测试这一点，并且我在浏览器中看到URI的更改）。
2. 如果我直接进入/sign\u in，它可以正常工作。唯一的问题是当

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

1. 在myPrivateRoute中使用带路由器的-基于此答案

我目前正在使用react-router-dom@5.2.0和反应@^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。

这似乎解决了这个问题有点副作用这个问题

所以我最后的改变是；

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>