Javascript 如何使用React路由器正确重定向？

我正在尝试使用React和React路由器设置一个简单的身份验证重定向

以下是我正在使用的重要软件包及其版本：

{
  "react": "^16.3.1",
  "react-dev-utils": "^5.0.1",
  "react-dom": "^16.3.1",
  "react-redux": "^5.0.7",
  "react-router-dom": "^4.3.0-rc.2",
  "redux": "^3.7.2",
}

这就是我要达到的目标：

1. If user is not signed in and     going to /signin -- allow
2. If user is     signed in and     going to /signin -- redirect to /
3. If user is not signed in and not going to /signin -- redirect to /signin
4. If user is     signed in and not going to /signin -- allow

使用下面的代码，重定向似乎正在发生——我在浏览器中看到了正确的url

但是，对于用户已登录并将要/登录的情况，我确实看到浏览器的URL更改为

/

，但

仪表板

组件未呈现

以下是相关代码：

app.js

import React, { Component } from "react";
import { Fabric } from "office-ui-fabric-react/lib/Fabric";
import { BrowserRouter as Router } from "react-router-dom";
import SmartRoute from "./smart-route";
import Header from "./ui/header";
import Dashboard from "./dashboard";
import SignIn from "./auth/signin";
import styles from "./app.scss";

class App extends Component {
  render() {
    return (
      <Router>
        <Fabric>
          <Header />
          <section className={styles.main}>
            <SmartRoute exact={true} path="/" component={Dashboard} />
            <SmartRoute exact={true} path="/signin" component={SignIn} />
          </section>
        </Fabric>
      </Router>
    );
  }
}

export default App;

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";

const renderComponent = (props, isAuthenticated, Component) => {
  const path = props.match.path;
  if (path === "/signin" && !isAuthenticated) return <Component {...props} />;
  if (path === "/signin" && isAuthenticated) return <Redirect to="/" />;
  return isAuthenticated ? <Component {...props} /> : <Redirect to="/signin" />;
};

const SmartRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={props => renderComponent(props, isAuthenticated, Component)}
  />
);

const mapStateToProps = state => ({
  isAuthenticated: state.session.authUser !== null
});

export default connect(mapStateToProps)(SmartRoute);

import React from "react";
const Dashboard = () => <section>Dashboard</section>;
export default Dashboard;

import React，{Component}来自“React”；
从“office ui Fabric react/lib/Fabric”导入{Fabric}；
从“react Router dom”导入{BrowserRouter as Router}；
从“/smart route”导入SmartRoute；
从“/ui/Header”导入标题；
从“/Dashboard”导入仪表板；
从“/auth/SignIn”导入登录；
从“/app.scss”导入样式；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

智能路由.js

import React, { Component } from "react";
import { Fabric } from "office-ui-fabric-react/lib/Fabric";
import { BrowserRouter as Router } from "react-router-dom";
import SmartRoute from "./smart-route";
import Header from "./ui/header";
import Dashboard from "./dashboard";
import SignIn from "./auth/signin";
import styles from "./app.scss";

class App extends Component {
  render() {
    return (
      <Router>
        <Fabric>
          <Header />
          <section className={styles.main}>
            <SmartRoute exact={true} path="/" component={Dashboard} />
            <SmartRoute exact={true} path="/signin" component={SignIn} />
          </section>
        </Fabric>
      </Router>
    );
  }
}

export default App;

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";

const renderComponent = (props, isAuthenticated, Component) => {
  const path = props.match.path;
  if (path === "/signin" && !isAuthenticated) return <Component {...props} />;
  if (path === "/signin" && isAuthenticated) return <Redirect to="/" />;
  return isAuthenticated ? <Component {...props} /> : <Redirect to="/signin" />;
};

const SmartRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={props => renderComponent(props, isAuthenticated, Component)}
  />
);

const mapStateToProps = state => ({
  isAuthenticated: state.session.authUser !== null
});

export default connect(mapStateToProps)(SmartRoute);

import React from "react";
const Dashboard = () => <section>Dashboard</section>;
export default Dashboard;

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从“react redux”导入{connect}；
const renderComponent=（道具、已验证、组件）=>{
const path=props.match.path；
if（path==“/sign”&&&！isAuthenticated）返回；
如果（路径==”/sign“&&isAuthenticated）返回；
返回是否已验证？：；
};
const SmartRoute=（{component:component，isAuthenticated，…rest}）=>(
renderComponent（道具、已验证、组件）}
/>
);
常量mapStateToProps=状态=>({
isAuthenticated:state.session.authUser！==null
});
导出默认连接（MapStateTops）（SmartRoute）；

dashboard.js

import React, { Component } from "react";
import { Fabric } from "office-ui-fabric-react/lib/Fabric";
import { BrowserRouter as Router } from "react-router-dom";
import SmartRoute from "./smart-route";
import Header from "./ui/header";
import Dashboard from "./dashboard";
import SignIn from "./auth/signin";
import styles from "./app.scss";

class App extends Component {
  render() {
    return (
      <Router>
        <Fabric>
          <Header />
          <section className={styles.main}>
            <SmartRoute exact={true} path="/" component={Dashboard} />
            <SmartRoute exact={true} path="/signin" component={SignIn} />
          </section>
        </Fabric>
      </Router>
    );
  }
}

export default App;

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";

const renderComponent = (props, isAuthenticated, Component) => {
  const path = props.match.path;
  if (path === "/signin" && !isAuthenticated) return <Component {...props} />;
  if (path === "/signin" && isAuthenticated) return <Redirect to="/" />;
  return isAuthenticated ? <Component {...props} /> : <Redirect to="/signin" />;
};

const SmartRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={props => renderComponent(props, isAuthenticated, Component)}
  />
);

const mapStateToProps = state => ({
  isAuthenticated: state.session.authUser !== null
});

export default connect(mapStateToProps)(SmartRoute);

import React from "react";
const Dashboard = () => <section>Dashboard</section>;
export default Dashboard;

从“React”导入React；
const Dashboard=（）=>仪表板；
导出默认仪表板；

问题是。要解决这个问题，您应该像这样使用with

withRouter

import { withRouter } from 'react-router'
//.. 
export default withRouter(connect(mapStateToProps)(SmartRoute))

发生这种情况的原因是redux实现了shouldComponentUpadte方法，该方法不知道位置更改（因此不会重新启动SmartRoute组件）。要克服这一问题，您可以将位置作为道具传递给SmartRoute（效率更高，但并不总是很简单）组件，或者用

withRouter

将其包装起来（快速且脏，但可能存在性能问题）。阅读文档了解更多信息。

问题在于。要解决这个问题，您应该像这样使用with

withRouter

import { withRouter } from 'react-router'
//.. 
export default withRouter(connect(mapStateToProps)(SmartRoute))

---

发生这种情况的原因是redux实现了shouldComponentUpadte方法，该方法不知道位置更改（因此不会重新启动SmartRoute组件）。要克服这一问题，您可以将位置作为道具传递给SmartRoute（效率更高，但并不总是很简单）组件，或者用

withRouter

将其包装起来（快速且脏，但可能存在性能问题）。阅读文档了解更多信息。

@MotiKorets添加

push={true}

没有帮助是的，直接转到

/

可以正常工作，我可以看到仪表板可能重复@MotiKorets添加

push={true}

没有帮助是的，直接转到

//code>可以正常工作，我可以看到仪表板可能重复的