React router navbar navigation

Question

Im новый, чтобы реагировать, и у меня возникают проблемы с маршрутизацией. Я хочу, чтобы navbar отображался на некоторых страницах, но не на других. Каков правильный способ сделать это? Я знаю, что им не нужно отображать его в определенных компонентах.

так, если это мой 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') 
); 

и это моя страница Войти (см NavBar экземпляр-неправильно)

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

Одним из вариантов было бы следить за какой странице вы находятся внутри переменной состояния в вашем основном компоненте приложения. Затем добавьте чек (например, вы не хотите отображать его, если страница указана «index».

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