It is said that in next js we don't need to install react-router-dom because the path of our pages depend on the pages folder. Well, it actually works when I create button to move to another pages. But when I create components folder and create navbar component, it doesn't work properly as it was. The next/link keeps reloading when it moves to another pages.
import Link from "next/link";
export default function Navbar() {
return (
<nav className="bg-black flex justify-between p-5 text-white">
<h1 className="font-bold text-sky-400">
<Link href="/">Furniture App</Link>
</h1>
<div>
<Link href="about">About</Link>
<Link href="promos">Promos</Link>
</div>
</nav>
);
}
Do I have to create components in pages folder in order to make Next/Link works without reload the browser?
Related
I recently deployed a website from Netlify using a demo GitHub repo that I copied. Although it seems pretty straightforward at first, I know too little about JS, HTML and CSS to continue. I'm only looking to host three pages that contain only text and hyperlinks, but I cannot for the life of me figure out how to implement more than one page with this particular code base I started with. Here's the index.js script:
import Head from 'next/head'
import Header from '#components/Header'
import Footer from '#components/Footer'
export default function Home() {
return (
<div className="container">
<div className="container-1">
<Head>
<title>Cool Page Title</title>
<link rel="icon" href="/coolicon.ico" />
</Head>
<div className="box-1">
<h3>Links</h3>
<p>
Current page <br />
Page 2 <br />
Another Page
</p>
</div>
<div className="box-2">
<h3>My cool page</h3>
<p>
Site under construction. <br />
For all inquiries, please call 555-5555
</p>
</div>
</div>
<div className="container-2">
<Footer />
</div>
</div>
)
}
The syntax is the really tricky part for me. The Home() function seems to return the html for the home page, so then how would I implement a second page and have the links change them out? Would a switch/case statement work here?
Okay, so I figured out what I didn't previously understand. Turns out I was (unknowingly) using Next.JS. To handle multiple pages, I just created separate files, identical to the index.js file, but with a different file and function name, and then linked to them using:
<Link href="/">Home</Link> <br />
<Link href="/newpage">New Page</Link> <br />
Where the first link directs you to the index page and the second takes you to the page titled "newpage." Guess it really was that simple.
Oh, and I also had to include this import statement at the beginning of each file that used links:
import Link from 'next/link';
Basically I'm trying to make a navbar for a personal website application in which the navbar references content (About/Skills, etc.) all on single page (route). When making the navbar, I can easily reference markup with ids/classes BUT I would have to put all the html in one file.
I noticed that if I were to separate each content into its own react file (About.jsx, Skills.jsx, etc.) and import them, there didn't seem to be a way for me to reference the react component's markup.
I also noticed with react router, this wasn't feasible because each component would be on a separate route (which I don't want) rather than on a single route.
This is my current navbar file below; How exactly Can I import and reference the markup of the separate components?
import React from 'react';
import "../Styles/NavBar.scss";
import About from "./About.jsx"; (Not used)
import Skills from "./Skills.jsx"; (Not Used)
import Projects from "./Projects.jsx"; (Not used)
const NavBar = () => (
<div class="MainDivWrapper">
<div class="NavBarDiv">
<h1 class="NavBarH1">NavBar</h1>
<br/>
<nav>
About
Skills
Projects
</nav>
{/* <div id="AboutDiv">
<h1>About Me</h1>
<span>Just some text</span>
</div>
<div id="SkillsDiv">
<h1>Skills</h1>
<span>Just some text</span>
</div>
<div id="ProjectssDiv">
<h1>Projects</h1>
<span>Just some text</span>
</div> */}
</div>
<hr class="HeaderDivider"/>
</div>
)
You reference a JSX import like that:
/* Component have to start with a capital letter. file name can be anything (usually is the same as component) */
import MyComponent from "./MyComponent"
export default function MyApp() {
return (
<div>
/* other html/components here */
<MyComponent /> // selfing close tag
/* or */
<MyComponent> // with `children`
some content
</MyComponent>
</div>
)
}
Here is a codesandbox implementation of your code: https://codesandbox.io/s/stack-reactjs-navbar-is-it-possible-to-reference-a-different-components-markup-64oic?file=/src/App.js
I am trying to understand basics of reach router and have doubts on following code
import React from "react";
import { render } from "react-dom";
import Logo from "./Logo";
import { Router, Link } from "#reach/router";
let Home = () => (
<div>
<h1>Home</h1>
<nav>
<Link to="/">Home</Link> |{" "}
<Link to="/dashboard">Dashboard</Link>
</nav>
</div>
)
let Dash = () => <div>Dash</div>
render(<Router>
<Home path="/" />
<Dash path="dashboard" />
</Router>, document.getElementById("root"));
I know that this Router works as Switch from router 4, i.e., renders only one path inside router.
Now when I start the app initially I am inside Home, e.g. here
<div>
<h1>Home</h1>
<nav>
<Link to="/">Home</Link> |{" "}
<Link to="/dashboard">Dashboard</Link>
</nav>
</div>
At this moment it is my belief that Dashboard component hasn't been rendered anywhere. However, if I type dashboard in URL or click the above link it correctly takes me to Dashboard component.
My question is how does algorithm of resolving to Dashboard works in this case?
Does it "restart" the app and see that there was a component registered for "dashboard" route initially?
My point is because when I am at home location there is nothing on the page anymore that indicates that Dashboard component is registered under dashboard route, or I am wrong?
<Router>'s internal implementation uses history.listen() (https://github.com/reach/router/blob/master/src/index.js#L103) which in turn listens to native popstate events (https://developer.mozilla.org/en-US/docs/Web/Events/popstate). You can see it in action here.
It looks like your intuitions are indeed right. <Router> component is history-aware by listening to history changes. It re-renders routes as a result of internal setState calls.
I can recommend going though the source code if you'd like to know even more about implementation details.
I currently have an app with a few different pages, the routing works fine if I use the Link to component in the initial page, however from the navbar I get the message:
Cannot GET /page1
And I also noticed that the link on the top of the browser goes to: http://localhost:3000/page1 as opposed to http://localhost:3000/#/cities (like it would if I use Link to).
My current navbar code is this:
export class NavigationBar extends Component {
render(){
return(
<Navbar>
<Navbar.Header>
<Navbar.Brand>
Navbar
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="/page1">Page1</NavItem>
<NavItem eventKey={2} href="/page2">Page2</NavItem>
</Nav>
</Navbar>);
}
}
If I just wrap the text up with Link to, it just works when we click on the text, which isn't what I want. What can I do so that the NavItem will behave like Link to but still look fine?
Thanks
I completely forgot that I need to wrap up each of my NavItem components with the LinkContainer from react-router-bootstrap.
That took care of everything.
I'm building a web view with my layout using basic React setup and react mdl (https://react-mdl.github.io/react-mdl) components. Of course I do have mdl css on my template.
I want to use the drawer components from React MDL with my custom layout. So far, i have this in my layout:
<div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<Header/>
<Drawer title="Title">
<Navigation>
Link
Link
Link
Link
</Navigation>
</Drawer>
</div>
Rendered drawer:
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
Link
Link
Link
Link
</nav>
</div>
Problem is it render ok but there are no drawer button generated. In demo layout a div with class mdl-layout__drawer-button is generated beside the drawer div, and a div with class mdl-layout__obfuscator at the end of layout.
I got the same issue, cause I made a mistake by using material-design-lite's scrips instead of react-mdl's scripts.
import 'react-mdl/extra/material.css'
import 'react-mdl/extra/material.js'
Hope this helps!