不加載 Navbar 組件，react-bootstrap

Question

我從 React.js 開始，在制作導航菜單時發現了這個問題。 它沒有生成預期的菜單效果，代碼如下：

 import React, {Component} from 'react'; import {Link} from 'react-router-dom'; import { Navbar, Nav, NavItem} from 'react-bootstrap'; export class Menu extends Component { render(){ return ( <Navbar> <Nav> <NavItem componentClass= {Link} href="/" to="/" > Inicio </NavItem> <NavItem componentClass= {Link} href="/Pelicula" to="/Pelicula" > Pelicula </NavItem> </Nav> </Navbar> ); } } export default Menu;

這是結果

它分為兩個組件，頂部是Menu組件，底部是Greeting組件，但我最感興趣的是菜單

我希望你的幫助

Answer 1

1. 確保包含樣式表

因為 React-Bootstrap 不依賴於一個非常精確的 Bootstrap 版本，所以我們不附帶任何包含的 css。 但是，使用這些組件需要一些樣式表。 您包含的引導程序樣式和方式由您決定，但最簡單的方法是包含來自 CDN 的最新樣式。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

React-bootstrap - 入門

---

2. 將您的NavItem包裹在BrowserRouter

---

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

export class Menu extends Component {
  render() {
    return (
      <Navbar>
        <Nav>
          <BrowserRouter>
            <NavItem componentClass={Link} href="/" to="/">Inicio</NavItem>
          </BrowserRouter>
          <BrowserRouter>
            <NavItem componentClass={Link} href="/Pelicula" to="/Pelicula">Pelicula</NavItem>
          </BrowserRouter>
        </Nav>
      </Navbar>
    );
  }
}

export default Menu;

閃電戰