一条路线有效，一条无效

Question

我刚开始学习反应。我有一个呈现 Home 和 Header 的 App 组件。 Home 呈现一个输入和一个按钮，如果单击按钮并且输入有效，我想呈现组件 Dashboard 并将我的路由设置为“/dashboard”。 Dashboard 组件永远不会被渲染，并且 URL 也不会改变。我不明白为什么组件 Home 呈现而 Dashboard 不呈现，我应该在 Home 组件中的 return 语句中进行哪些更改。

这是在我的 App 组件中

render() {
    return (
      <Router>
        <div className="app">
            <Header />
            <Route exact path={'/'} component={Home} />
        </div>
      </Router>
    );
}

这是在我的 Home 组件中

render() {
    if(this.state.clicked) {
        if (this.state.valid)
            return (
                <div>
                    <Route path={'/dashboard'} component={Dashboard}/>
                </div>
            )
        else
            this.change; //change set clicked to false
    }
    return (
        <div>
            <input onChange={this.inputChange.bind(this)}/>
            <button onClick={this.login}>LOGIN</button>
        </div>
    );
}

Answer 1

只有在满足 url 的情况下，你的 home 组件才会渲染路由。在您的主组件中，您并没有更改组件 URL，您只是告诉它在 url 与它的路径匹配时呈现仪表板组件。我认为您要使用的是 react-routers Redirect component。该组件在被调用时会将您重定向到不同的组件。但是，这意味着您必须在其他地方定义仪表板组件。在您的情况下，您的 Home 组件看起来像：

render() {
if(this.state.clicked) {
    if (this.state.valid)
        return (
            <Redirect to='/Dashboard' />
        )
    else
        this.change; //change set clicked to false
}
return (
    <div>
        <input onChange={this.inputChange.bind(this)}/>
        <button onClick={this.login}>LOGIN</button>
    </div>
);
}

您的 App 组件将为 Dashboard 设置路由

render() {
return (
  <Router>
    <div className="app">
        <Header />
        <Route exact path={'/'} component={Home} />
        <Route exact path={'/Dashboard'} component={Dashboard} />
    </div>
  </Router>
);
}