Reactjs 一条路线可行，一条不可行'；T

我刚开始学反应。我有一个应用程序组件，用于呈现主页和标题主页呈现输入和按钮，如果单击按钮且输入有效，我希望呈现组件仪表板，并将路径设置为“/Dashboard”。组件仪表板永远不会呈现，URL也不会更改。我不明白为什么组件Home呈现而仪表板不呈现，以及我应该在Home组件中的return语句中更改什么

这在我的应用程序组件中

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

render（）{
返回(
);
}

这在我的主页组件中

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

render（）{
if（this.state.clicked）{
if（this.state.valid）
返回(
)
其他的
this.change；//更改集单击为false
}
返回(
登录
);
}

只有在满足url的情况下，主组件才会呈现路由。在主组件中，您没有更改组件URL，只是告诉它如果URL与仪表板组件的路径匹配，则呈现仪表板组件。我想你想用的是反应路由器。调用此组件时，它会将您重定向到其他组件。但是，这意味着您必须在其他地方定义仪表板组件。在您的情况下，主页组件的外观如下：

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

render（）{
if（this.state.clicked）{
if（this.state.valid）
返回(
)
其他的
this.change；//更改集单击为false
}
返回(
登录
);
}

您的应用程序组件将为仪表板设置路由

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

render（）{
返回(
);
}

在ASP.NET MVC中，有一个扩展名是“路由调试器”。也许也是？我已经试过了（忘了提了），但后来我需要将道具传递给仪表板，我可以用重定向来完成吗？是的，你可以这样编写重定向组件：

，如果您试图只允许用户在登录后查看组件，我建议创建一个更高阶的组件来呈现PrivateRoute组件，该组件接收路由，并且仅在条件（如isAuthorized）为真时才呈现。它还不必如此复杂（我只是尝试学习一些基本的东西）但是谢谢你的建议！此外，重定向工程完美，我可以传递道具到仪表板，谢谢！