以编程方式重定向时查看不呈现 - React Js Connected Router

Question

当用户令牌在本地存储中可用并且在浏览器上获取“/login”网址时，应将用户重定向到仪表板页面。

所以代码写成如下。

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>

Dashboard 组件编写如下。

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>