反应路由器导航栏导航

React router navbar navigation

本文关键字：导航 路由器      更新时间：2023-09-26

我是新手，并且我在路由方面遇到了问题。我希望导航栏在某些页面上呈现，而不是在其他页面上呈现。正确的方法是什么？我知道我不应该在特定组件中渲染它。

所以如果这是我的应用程序.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

一种选择是在主应用程序组件的状态变量中跟踪您所在的页面。然后添加一个检查（假设如果页面是"索引"，您不想呈现它。

return (
  { if (this.state.page !== 'index')
      return <NavbarInstance />
  }
)
相关文章：