Reactjs 反应路由器渲染应用程序和登录

我有这条路线：

<Route path="/" component={App}>
        <Route path="login">
            <IndexRoute component={LoginPage}/>
        </Route>
        <Route onEnter={requireAuth}>
            <IndexRoute component={DashboardPage} />
            <Route path="accounts">
                <IndexRoute component={AccountPage}/>
                <Route path="add" component={AccountAdd} />
                <Route path="detail/:id" component={AccountDetail} />
            </Route>
            <Route path="contacts">
                <Route path="detail/:id" component={ContactPage}/>
            </Route>
            <Route path="transmissors">
                <Route path="detail/:id" component={TransmissorPage}/>
            </Route>
            <Route path="attends" component={AttendancePage} />
            <Route path="reports" component={ReportPage} />
            <Route path="configs" component={ConfigurationPage} />
       </Route>
    </Route>

在我的应用程序组件中，我希望有一个条件来呈现登录页面和应用程序页面

我不知道如何在我的应用程序中执行此操作

以下是我的应用程序代码：

class App extends React.Component{
    constructor(props) {
        super(props);
        console.log(this.props.children.type.name);
    }

    render() {

        const loginRender = this.props.children.type.name == "LoginPage";
        const appRender = this.props.children.type.name != "LoginPage";

        return (


            {loginRender(
                <div className="app-container">
                    {this.props.children}
                </div>
            )}

            {appRender(
                <div className="app-container">
                    <Header />
                    <Sidebar />
                    <Middle app={this.props.children}/>
                </div>
            )}



        );
    }
}

export default App

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
log（this.props.children.type.name）；
}
render（）{
const loginRender=this.props.children.type.name==“LoginPage”；
const appender=this.props.children.type.name！=“登录页面”；
返回(
{loginRender(
{this.props.children}
)}
{依附体(
)}
);
}
}
导出默认应用程序

---

我不知道使用this.props.children.type.name来获取登录页面是最好的方式还是一种好的做法。

您可以在使用react router的路线中使用

onEnter

方法

看看这个

---

您还可以看到使用react router Onter方法的

，在实际安装应用程序组件之前，您需要检查用户是否经过身份验证，如果用户未经过身份验证，则将其重定向到“/login”。您不需要在应用程序组件内呈现LoginPage。例如：

//I use here token authentication, but it can be adopted easily in your case
function redirect(nextState, replace) {
   if (auth.loggedIn()) {
     replace('app');
   } else {
     replace('login');
   }
}

function redirectHome(nextState, replace) {
  if (auth.loggedIn()) {
    replace('app');
  }
}

function requireAuth(nextState, replace) {
  if (!auth.loggedIn()) {
    replace('login');
  }
}

<Router history={hashHistory}>
  <Route path="login" component={Login} onEnter={redirectHome}/>
    <Route path="app" component={Layout} onEnter={requireAuth}>
      <IndexRoute component={Dashboard}/>
      <Route path="accounts" component={Accounts}/>
      <Route path="settings" component={Settings}/>
    </Route>
  <Route path="*" onEnter={redirect}/>
</Router>

//我在这里使用令牌身份验证，但在您的案例中很容易采用
函数重定向（下一状态，替换）{
if（auth.loggedIn（））{
替换（“应用程序”）；
}否则{
替换（“登录”）；
}
}
功能重定向主页（下一状态，替换）{
if（auth.loggedIn（））{
替换（“应用程序”）；
}
}
功能要求授权（下一状态，替换）{
如果（！auth.loggedIn（））{
替换（“登录”）；
}
}

---

在本例中，登录页面在登录组件中呈现

我在这里尝试并告诉您如果我没有登录并转到应用程序页面，我可以为您编辑我的问题吗？尝试帮助我？尝试在每个函数中控制台.log（auth.loggedIn（））并查看它返回的内容。另外，请尝试从函数中删除cb attribute和cb（），当然，您可以删除遗留的requireAuth函数，因为您使用的是您自己的，我根据我的注释编辑了代码。只需检查auth.loggedIn（）是否正确地返回true和false