Question

So I'm trying to user react-bootstrap, like this:

import React from 'react';
import {BrowserRouter, Route, Switch, Link} from "react-router-dom";
import {Navbar, Nav} from "react-bootstrap";
import {LinkContainer} from "react-router-bootstrap";
import {HomeComponent} from "../home/HomeComponent";
import {ContactComponent} from "../contact/ContactComponent";
import {AboutComponent} from "../about/AboutComponent";

render() {
    return (
        <BrowserRouter>
            <Navbar bg="light" expand="lg">
                <Link to={'/'}>Home</Link>
                <Link to={'/about'}>About us</Link>
                <Link to={'/contact'}>Contact us</Link>
            </Navbar>
            <Switch>
                <Route exact={true} path={'/about'} component={AboutComponent}/>
                <Route exact={true} path={'/contact'} component={ContactComponent}/>
                <Route exact={true} path={'/'} component={HomeComponent}/>
            </Switch>
        </BrowserRouter>
    );
}

According to the docs, it should look like this:

But it looks like this:

So it looks like it's not using any styles. Why is that?

Answer 1

You need to include the stylesheets. As stated on the react bootstrap getting start documentation:

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
  integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
  crossorigin="anonymous"
/>

You should try adding that snippet of code to the <head></head> of your html file and you should be good to go.

more info

React-Bootstrap Navbar does not display styles

1 个答案: