反應路由器使應用程序和登錄

我有這樣的路線：反應路由器使應用程序和登錄

<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

我不知道，如果使用this.props.children.type.name獲得loginpage是最好的方法還是不錯的實踐。

來源

2016-06-29 Alessander França

使用反應路由器，你需要的OnEnter方法檢查用戶是否在實際掛載應用程序組件之前進行了身份驗證，如果未通過身份驗證，則將用戶重定向到「/ login」。您不需要在App組件內呈現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>

在這個例子中登錄頁面的登錄組件呈現

來源

2016-06-29 15:06:48

我想在這裏告訴你，如果我得到了 –

我沒有收到登錄並進入應用頁面，我可以編輯我的問題爲你嘗試幫我嗎？ –

嘗試在每個函數中使用console.log（auth.loggedIn（））並查看它返回的內容。還嘗試從函數 –

可以使用onEnter方法您的路線內與反應路由器

看看這個example

你可以看到太多的EnterHook

來源

2016-06-29 15:02:30 EQuimper

反應路由器使應用程序和登錄

回答

相關問題