Question

我想要实现的是根据路由URL呈现围绕视图的不同内容。我正在使用react-router。

const App = React.createClass({
  render() {
    return ( 
      <div> //this is when Login component
          {this.props.children}

           //something like this when it is any page except login
          <Sidebar />
          {this.props.children}
      </div>
    )
  }
})

ReactDOM.render(
        <Router history={createBrowserHistory()}>
          <Route path="/" component={App}>
            <IndexRoute component={Login} />
            <Route path="login" component={Login} />
            <Route path="publisher-list" component={PublisherList}/>
              <Route path="/edit-publisher/:id" component={EditPublisher}/>
            <Route path="add-publisher" component={AddPublisher}/>
            <Route path="add-professional" component={AddProfessional}/>
          </Route>
        </Router>
  , document.getElementById('app'));

我的问题是当它是登录页面时隐藏侧边栏并在其余页面上显示侧边栏。我怎么能这样做？？

*我没有包含导入，假设包括所有导入。

将此视为管理门户端的示例。您希望看到的第一件事是登录页面。因此不需要侧边栏或导航栏。但是，一旦他登录所有视图，默认情况下必须包含侧边栏和导航栏。所以www.admin.com/或www.admin.com/login应该是登录页面，其余的网址就像www.admin.com/publisher-list或www.admin.com/professional等应该有导航栏和侧边栏。

Answer 1

这样的事情怎么样？

function requireAuth(nextState, replaceState) {
    if (typeof window !== 'undefined') {
        if (!localStorage.jwt) {
            replaceState({nextPathname: nextState.location.pathname}, '/login');
        }
    }
}

function disallowLogin(nextState, replaceState) {
    if (typeof window !== 'undefined') {
        if (localStorage.jwt) {
            replaceState({nextPathname: nextState.location.pathname}, '/');
        }
    }
}

export default (
    <Route>
        <Route path="login" component={Login} onEnter={disallowLogin}/>
        <Route path="/" component={App} onEnter={requireAuth}>
          Your routes here            
        </Route>
    </Route>
);

基本上是这样的：

每当有人访问您的网页时，他都会被重定向到Login，除非他在本地存储中拥有JWT。如果他将被认证，那么他将继续管理app。

另一种方式可能是

var children = React.Children.map(this.props.children, (child) => {
                return React.cloneElement(child, {isAuthenticated: true/false});
})

然后根据isAuthenticated道具的结果，你可以在每个孩子中渲染或不渲染它。虽然补充工具栏需要成为一个孩子。

最后一种情况是仅在补充工具栏中呈现不同的渲染，具体取决于是否有人登录

render() {
    if(this.props.isAuthenticated){
       return <Sidebar />
    } else {
       return <div/>
}

此外，如果您在他的浏览器中的某个地方存储了记录的人物令牌（即localStorage），那么您可以简单地检查他是否在那里有一个令牌（这基本上意味着他已经登录）然后显示它如上所述ofAuthenticated你将有一个不同的案例

Answer 2

我认为最好的办法就是简单地创建另一个组件和具有不同样式的子路径：

<Router history={createBrowserHistory()}>
  <Route path="/" component={App1}>
    <IndexRoute component={Login} />
    <Route path="login" component={Login} />
    <Route path="add-professional" component={AddProfessional}/>
  </Route>
  <Route path="/publisher" component={App2}>
    <IndexRoute component={PublisherList} />
    <Route path="edit/:id" component={EditPublisher}/>
    <Route path="add" component={AddPublisher}/>
  </Route>
</Router>

这样您可以为app1和app2设置不同的布局。

替代：

您可以在app中添加一些条件，以检查当前网址是否为this.props.location.pathname，并在其上播放条件。但是，根据您的应用，可能不建议这样做。

根据路线

2 个答案: