反应路由器导航栏导航

Question

林新的反应和即时通讯有问题的路由。我想让导航栏在某些页面上呈现，但不是其他人。正确的方法是什么？我知道我不应该在特定的组件中呈现它。

所以如果这是我的app.js

var App = React.createClass ({ 
    render(){ 
    return (
     <div> 
     <NavbarInstance /> 
     </div> 
    ); 
    } 
}); 


document.write('<div id="container"></div>'); 
ReactDom.render(
    <Router history={createHistory({ queryKey: false })} 
     onUpdate={() => window.scrollTo(0, 0)}> 
    <Route path="/" component={App} /> 
    <Route path="/login" component={LoginForm} /> 
    <Route path="/other" component={Other} /> 
    </Router>, 
    document.getElementById('container') 
); 

，这是我的登录页面（见导航栏例如，不正确的）

import React from 'react'; 
import Input from 'react-bootstrap/lib/Input'; 
import NavbarInstance from './components/header.jsx'; 

const LoginForm = React.createClass({ 

    getInitialState: function() { 
     return { 
     username:'', 
     password:'' 
     } 
    }, 

    render() { 
    return (
     <div> 
     <NavbarInstance /> 
     <div className = "col-sm-12"> 
      <h3> Log In </h3> 
      </div> 
      <div className ="col-sm-6"> 
      <Input type = "text" 
      placeholder ="Username" 
      /> 
      <Input type= "password" 
       placeholder="Password" 
      /> 
      </div> 
     </div> 
    ) 
    } 
}) 

export default LoginForm 

Answer 1

一个选项将跟踪哪些网页的你位于主应用程序组件中的状态变量内。然后添加一张支票（假如你的网页是'索引'，你不想渲染它。）

return (
    { if (this.state.page !== 'index') 
     return <NavbarInstance /> 
    } 
)