Skip to content

Instantly share code, notes, and snippets.

@gustavlrsn

gustavlrsn/Layout.js

Created May 1, 2017 18:11
Download ZIP
Example bootstrap 4 integration into Next.js, with the reactstrap package
Raw
Layout.js
import Head from 'next/head'
import { Container } from 'reactstrap'
const Layout = (props) => (
<div>
<Head>
<title>PairHub</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
</Head>
<Container>
{props.children}
</Container>
</div>
)
export default Layout
@hsimah
Copy link

hsimah commented Oct 8, 2017

@tharakabimal I did it this way:

    <header>
      <Navbar color="faded" light>
        <Link href="/">
          <NavbarBrand>busbuddy</NavbarBrand>
        </Link>
        <Nav>
          <NavItem>
            <Link href="/routes">
              <NavLink href="#">Routes</NavLink>
            </Link>
          </NavItem>
          <NavItem>
            <Link href="/profile">
              <NavLink href="#">Profile</NavLink>
            </Link>
          </NavItem>
          <NavItem>
            <Link href="/about">
              <NavLink href="#">About</NavLink>
            </Link>
          </NavItem>
          <NavItem>
            <Link href="/logout">
              <NavLink href="#">Logout</NavLink>
            </Link>
          </NavItem>
        </Nav>
      </Navbar>
    </header>

Not sure if the hashes will cause an issue down the line with fragments, but for my simple menu this has worked.

@phjardas
Copy link

Try this:

<NavItem>
  <Link href="/foobar" passHref>
    <NavLink>foobar</NavLink>
  </Link>
</NavItem>

@ModernHooman
Copy link

I get the following error when using this approach.

Unexpected token export
C:\Users\user\WebstormProjects\site_ui\node_modules\react-popper\lib\react-popper.js:1
(function (exports, require, module, __filename, __dirname) { export { default as Manager } from './Manager';
^^^^^^

    SyntaxError: Unexpected token export
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\user\WebstormProjects\site_ui\node_modules\reactstrap\dist\reactstrap.cjs.js:14:19)
        at Module._compile (module.js:643:30)
        at Object.Module._extensions..js (module.js:654:10)
        at Module.load (module.js:556:32)
        at tryModuleLoad (module.js:499:12)
        at Function.Module._load (module.js:491:3)
        at Module.require (module.js:587:17)

any idea about fixing react-popper.js?

@amartincaro
Copy link

I'm having the exact same error that @hooman-limouee. Any ideas?

@DavyBello
Copy link

DavyBello commented Mar 2, 2018 •
edited
Loading

@hooman-limouee downgrading reactstrap to v5.0.0-beta fixed this issue for me

@bruno-ortiz
Copy link

@DavyBello downgrading didn't work here, did you do anything else?

@Vadorequest
Copy link

Same issue with react-popper on beta-2

@Vadorequest
Copy link

Vadorequest commented Mar 10, 2018 •
edited
Loading

Switching back to v5.0.0-beta worked for me too.

@Vadorequest
Copy link

Official Reactstrap Issue about it: reactstrap/reactstrap#870 with workaround explained

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment