Question

如果用户令牌在本地存储中可用并且在浏览器上使用了“ / login” URL，则应将用户重定向到仪表板页面。

因此，代码编写如下。

const history = createHistory();
const { token, location } = this.props;
<ConnectedRouter history={history}>
  <Switch>
    <Route path="/login" render={ () => (token && <Redirect to="/dashboard"/>) || <Login />}
    />
    <Route exact path="/dashboard" component={Dashboard} />
  </Switch>
</ConnectedRouter>

仪表板组件编写如下。

class Dashboard extends PureComponent {

  render() {
    return (
      <div className="dashboard-wrapper">
          This is a dashboard view
      </div>
    );
  }
}

Package.json依赖项

    "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^5.1.1",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.0.0"
  },

问题在于，从登录页面重定向后，仪表板视图无法呈现。

当前行为-

键入“ / login”后，应重定向到“ / dashboard”- 现在工作'
'这是仪表板视图'，当重定向到仪表板页面时将呈现该文本-不起作用

预期行为 -重定向到仪表板页面时呈现的“ 这是仪表板视图”文本

关于如何解决此问题的任何想法。

编辑1：

如果我使用浏览器路由器而不是连接的路由器，则上面的代码可以正常工作。

但是我需要知道使用连接的路由器时出了什么问题。

Answer 1

您只需要将props定义为render prop功能组件中的参数

const history = createHistory();
const { token, location } = this.props;
<ConnectedRouter history={history}>
  <Switch>
    <Route path="/login" render={ (props) => (token && <Redirect to="/dashboard"/>) || <Login {...props}/>}
    />
    <Route exact path="/dashboard" component={Dashboard} />
  </Switch>
</ConnectedRouter>

通过编程重定向时视图未呈现-Reactjs Connected Router

1 个答案: