Question

我不确定我是否在这里没有复制某些功能。我正在尝试将react-bootstrap与react-router-dom结合起来

应用程序组件：

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Header from './Header';
import Home from './Home';
import Shapes from './Shapes';
import Images from './Images';
import '../App.css';

class App extends Component {
  render() {
    return (
      <div className='container-fluid'>
        <div>
          <Header />
        </div>
          <Switch>
           <Route exact path='/' component={Home} />
           <Route exact path='/Shapes' component={Shapes} />
           <Route exact path='/Images' component={Images} />
           <Route render={function () {
                 return <p>Not found</p>
           }} />
          </Switch>
      </div>
    );
  }
}

export default App;

标题组件：

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { Navbar, Nav, NavItem } from 'react-bootstrap';

class Header extends Component {
  render() {
    return (
      <Navbar>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#">React-Bootstrap</a>
          </Navbar.Brand>
        </Navbar.Header>
          <Nav>
            <NavItem eventKey={1} href='/'>
              <NavLink exact activeClassName='active' to='/'>Home</NavLink>
            </NavItem>
            <NavItem eventKey={2} href='/Shapes'>
                <NavLink exact activeClassName='active' to='/Shapes'>Shapes</NavLink>
            </NavItem>
            <NavItem eventKey={3} href='/Images'>
                <NavLink activeClassName='active' to='/Images'>Images</NavLink>
            </NavItem>
          </Nav>
      </Navbar>
    );
  }
}

export default Header;

两件事：

我不是太复杂了吗？
导航栏没有像我预期的那样水平对齐：

ReactBootstrap Home Shapes Images

是：

ReactBootstrap

主页

形状

图片

请告知。

Answer 1

这应该可以解决问题：

_addressDetail

基于此Apollo教程：https://www.howtographql.com/react-apollo/6-more-mutations-and-updating-the-store/

使用react-bootstrap导航的{react-router-dom}

1 个答案: