React Router导航栏导航

Question

Im new to react and im having issues with the routing. I want the navbar to render on some pages but not others.What is the correct way to do this? I know im not supposed to render it in specific components.

so if this is my 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')
);

and this is my login page(see navbar instance-incorrect)

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

One option would be to keep track of what page you are in within a state variable within your main App component. Then add a check (say you didn't want to render it if page is 'index'.

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