Question

我刚开始学习反应。我有一个 App 组件，可以呈现主页和标题。主页呈现输入和按钮，如果单击按钮且输入有效，我想呈现组件仪表板并将我的路线设置为'/ dashboard'。永远不会呈现组件仪表板，并且URL也不会更改。我不明白为什么组件主页呈现而信息中心没有，我应该在主页组件的返回语句中更改什么。

这是在我的应用组件

中

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

这是在我的主页组件

中

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匹配路径，则您不会更改组件URL，只是告诉它呈现仪表板组件。我认为你想要使用的是react-routers Redirect component。调用此组件时，您将重定向到另一个组件。但是，这意味着您必须在其他位置定义仪表板组件。在您的情况下，主页组件看起来像：

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>
);
}

一条路线有效，一条没有

1 个答案: