Integration between React Starter Kit and React Bootstrap

I am a bit new to the world of ReactJS but I have been coding in Javascript for a while now. Loving what you people doing with this project! Keep making this world a better place! A while ago I added react-bootstrap to this project to make my life a bit easier. I followed the tutorial from react-bootstrap and I successfully added Bootstrap.

The problem is now I cannot use the build in <Link /> from react-starter-kit which I liked a lot because of its simplicity and “power”.

The official approach from react-bootstrap is to install react-router-bootstrap and replace <Link to="/path"> with <LinkContainer to="/path"> but that means that I have to replace react-routing and universal-route with react-router, and this is something I would like to avoid.

What is the right way to integrate react-bootstrap with react-starter-kit and still be able to use universal-routing? What changes should I make in order to make LinkContainer behave as Link component does?

When using Link from react-starter-kit a get this kind of error Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See Header > NavItem > SafeAnchor > a > ... > Link > a. Related link for this issue . (http://stackoverflow.com/questions/35687353/react-bootstrap-link-item-in-a-navitem)

The official recommendation from react-bootstrap, and react-router. (https://github.com/ReactTraining/react-router/issues/83#issuecomment-214794477)

[gruffT]

Came accross this thread and tried this method but it didn’t work for my (fairly vanilla) project. I finally got it sorted in a very easy way so thought I’d share in case it helps someone else.

Add dependencies yarn add reactstrap@next bootstrap@4.0.0-beta.3

src\components\Layout\Layout.js add import bootstrap from 'bootstrap/dist/css/bootstrap.css'; and modify the export to include bootstrap export default withStyles(normalizeCss, bootstrap, s)(Layout);

… and that’s it! Took me a long time to figure out something really simple.

[Burry]

Ok I fixed it. If anyone happens to run into this problem, this is a Webpack issue. This configuration block in webpack.config.js is what adds prefixes and hash suffixes to internal CSS classes.

// Process internal/project styles (from src folder)
{
    include: path.resolve(__dirname, '../src'),
    loader: 'css-loader',
    options: {
        // CSS Loader https://github.com/webpack/css-loader
        importLoaders: 1,
        sourceMap: isDebug,
        // CSS Modules https://github.com/css-modules/css-modules
        modules: true,
        localIdentName: isDebug
            ? '[name]-[local]-[hash:base64:5]'
            : '[hash:base64:5]',
        // CSS Nano http://cssnano.co/
        minimize: isDebug ? false : minimizeCssOptions
    }
},

Because my Bootstrap tie-together .scss file was in /src, Bootstrap’s class names were being modified. So I added an explicit exclude directive. Probably not the most elegant solution, but it works.

exclude: path.resolve(__dirname, '../src/components/bootstrap.scss'),

And for the block just before…

// Process external/third-party styles
{
    exclude: path.resolve(__dirname, '../src'),
    loader: 'css-loader',
    options: {
        sourceMap: isDebug,
        minimize: isDebug ? false : minimizeCssOptions
    }
},

Add this directive to explicitly process the custom bootstrap.scss file:

include: path.resolve(__dirname, '../src/components/bootstrap.scss'),

One final note. If anyone tries to add in custom Sass variables to Bootstrap using this method, in your custom .scss file, switch the order of the custom variables.scss and source bootstrap.scss from the earlier example I gave, or your custom variables won’t be included:

/src/components/bootstrap.scss

@import 'variables';
@import 'node_modules/bootstrap/scss/bootstrap';