根据路由渲染不同的组件

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 应该是登录页面，其余 URL..like www.admin.com/publisher-list 或 www.admin.com/professional等应该有导航栏和侧边栏。

Answer 1

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

<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 中添加一些条件来检查当前 url 和 this.props.location.pathname 并在其上使用条件。不过，根据您的应用程序，这样做可能并不明智。

Answer 2

这样的事情怎么样？

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

所以基本上：

只要有人访问您的页面，他就会被重定向到登录，除非他的 localStorage 中有 JWT。如果他将通过身份验证，那么他将继续管理应用程序。

反过来可能是

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

然后你可以在每个 children 中渲染或不渲染它取决于 isAuthenticated 道具的结果。虽然那时 Sidebar 需要成为一个子项。

最后一种情况仅在侧边栏中呈现不同，具体取决于是否有人登录

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

此外，如果您将登录的人员令牌存储在他的浏览器中的某个位置（即 localStorage），那么您可以简单地检查他那里是否有令牌（这基本上意味着他已登录），然后像上面那样显示它虽然不是 isAuthenticated 你会有不同的情况[=13=]

根据路由渲染不同的组件

Render different component depending on route

reactjs

react-router