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

这是我的登录页面（参见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

一种选择是跟踪您在主App组件中的状态变量中的页面。然后添加一张支票（如果页面是＆＃39;索引＆＃39;那么你就不想呈现它。

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

反应路由器导航栏导航

1 个答案: