-
-
Save gustavlrsn/509694de7f4ee5a5d720d218b21f288e to your computer and use it in GitHub Desktop.
| 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 |
I'm using this approach but the site is showing a FOUC
Same here
Solved it!
In the <link> I just changed crossorigin to crossOrigin.
@gustavlrsn could you kindly tell me how you implemented the nav bar? I'm having trouble adding Link inside NavLink
return (
<div>
<Navbar color="faded" light expand="md">
<NavbarBrand href="/">My Blog</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<Link href='/about'>
<NavLink>About</NavLink>
</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
)
@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.
Try this:
<NavItem>
<Link href="/foobar" passHref>
<NavLink>foobar</NavLink>
</Link>
</NavItem>
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?
I'm having the exact same error that @hooman-limouee. Any ideas?
@hooman-limouee downgrading reactstrap to v5.0.0-beta fixed this issue for me
@DavyBello downgrading didn't work here, did you do anything else?
Same issue with react-popper on beta-2
Switching back to v5.0.0-beta worked for me too.
Official Reactstrap Issue about it: reactstrap/reactstrap#870 with workaround explained
I'm using this approach but the site is showing a FOUC