I created a new next app and installed the newest version. I am testing out the app dir and encountered an error.
When I continually switch between the about and contact page and refresh the page at the same time like in this video
This error shows up
This only happens if the Footer component is added. If I remove the Footer component this will not happen
app/about/page.js
import Link from 'next/link'
import { Footer } from '../Footer'
export default function Page() {
return (
<>
<Link href="/about">about</Link>
<Link href="/contact">contact</Link>
<Footer />
</>
)
}
app/contact/page.js
import Link from 'next/link'
import { Footer } from '../Footer'
export default function Page() {
return (
<>
<Link href="/about">about</Link>
<Link href="/contact">contact</Link>
<Footer />
</>
)
}
app/footer.jsx
export function Footer() {
return (
<footer>Footer</footer>
)
}
Github Repo
I was able to reproduce the error after following the OP's instructions to refresh quickly ("spam refresh") several times.
I am able to solve the error by making the Footer component exported in Footer.jsx a default export, rather than named export.
Simply change the function in Footer.jsx to read:
export default function Footer() {
...
}
And update the Footer imports within the pages, i.e.
// app/about/page.js
import Footer from '../Footer'
...
// app/contact/page.js
import Footer from '../Footer'
...
🌶️ The ... ellipses are for example, obviously not legitimate JavaScript! Replace with your code.
Related
Can anyone tell me why the following Link Component is unable to find the linked page? VSCode is literally auto-completing the file name as I type it in but for some reason I keep getting 404.
//index.js in WelcomePage folder
import styles from "/styles/WelcomePage.module.css";
import Link from "next/link";
function WelcomePage() {
return (
<>
<h1 className={styles.title}>This is the Title</h1>
<Link href="/pages/ClassSearch">Class Search</Link>
</>
);
}
export default WelcomePage;
//index.js in ClassSearch folder
function ClassSearch() {
return <h1>The Class Search Page</h1>;
}
export default ClassSearch;
I think you need to link /ClassSearch instead of pages/ClassSearch
If you create pages/ClassSearch/index.js that exports a React component , it will be accessible at /ClassSearch
// <Link href="/pages/ClassSearch">Class Search</Link>
<Link href="/ClassSearch">Class Search</Link>
You can check , Next Page Doc
https://nextjs.org/docs/basic-features/pages
This question already has answers here:
Target Active Link when the route is active in Next.js
(15 answers)
Closed last year.
In My Next.js project I've made a simple Layout.js which contains the following code:
import { Fragment } from "react";
import Header from "./Header/Header";
import Footer from "./Footer/Footer";
function Layout(props) {
return (
<Fragment>
<Header />
{props.children}
<Footer />
</Fragment>
);
}
export default Layout;
Then I've changed the _app.js file to the following:
import Layout from "../components/Layout/Layout";
import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
So now every page in my website will have the header (and footer).
If I navigate to the results page for example my header will show up as expected:
But I would like to change the color of the div that contains the RESULTS text to be [for example] red.
I know that one way to do it would be to pass the header in each page and pass a prop to it that will indicate which div to change its color. However I'm wondering if there's a way to achieve that result with my current Layout.js since I don't want to pass the header to each page.
try this method:
import { useRouter } from "next/router";
function Header() {
const router = useRouter();
return (
<>
<ul>
<li style={{ color : router.route == "/result" ? "red" : "black" }}>Resut</li>
</ul>
</>
)
}
I'm having issues that I've never experienced before. Recently, I've started a new project with create-react-app however, I'm shown an error:
./src/App.js
Module not found: Can't resolve './pages/' in '
Folder Structure
I've tried different file paths but in my previous projects this is the path that has worked but for some reason, it doesn't work anymore.
App.js
import React from 'react';
import Home from './pages'
function App() {
return (
<div>
<h1>Hello</h1>
<Home />
</div>
);
}
export default App;
Home.js
import React from 'react'
export const Home = () => {
return (
<div>
<h1>Hello</h1>
</div>
)
}
If someone could help that would be great! I've been trying to solve this for the past 3hrs and nothing has come from it! Thanks in advance!
The reason you're code is failing is because the pages folder doesn't have an index.js file. If you want to import the Home page component directly from the pages folder, without using import Home from "./pages/home" syntax, you'll have to create an index.js file, inside the pages directory, that exports the home component, like this:
"./pages/index.js"
...
export * from './home';
export * from './someOtherPage';
....
Then, in App.js, you can import the Home component like this:
...
import { Home, SomeOtherComponent } from './pages';
...
Try './pages/Home' instead of './pages'
What you've imported as ./pages is actually the folder when you need to import the file itself. So it should be something like this:
import React from 'react';
import Home from './pages/Home.js'
function App() {
return (
<div>
<h1>Hello</h1>
<Home />
</div>
);
}
export default App;
Community, I rendered more than one component from a single page and the problem I receive is:
[./src/App.js Attempted import error: 'Greeting' is not exported from './components/Home'.]
Can anybody tell me why?
App.js
import "./App.css";
import { Home, Page, Greeting } from "./components/Home";
function App() {
return (
<div className="App">
<Home />
<Page />
<Greeting />
</div>
);
}
export default App;
Home.js
import React, { Component } from "react";
import React from "react";
class Home extends Component {
render() {
return (
<div className="box">
<h1>Its a box man!</h1>
</div>
);
}
}
class Page extends Component {
render() {
return (
<div className="box">
<h1>Its a second box man! from the other Component</h1>
</div>
);
}
}
const Greeting = () => {
return <h1>Hello again</h1>;
};
export { Home, Page, Greeting };
*The aim to practice two components from the same page, rather than just separating them.
Try to export all components one by one in Home.js like this:
export class Home...
export class Page...
export const Greeting...
And after that delete this line:
export { Home, Page, Greeting };
Change
const Greeting = () => {
return <h1>Hello again</h1>;
};
to
export const Greeting = () => {
return <h1>Hello again</h1>;
};
and your issue should be resolved
Try this in Home.js. If you export module as default, you can import without parenthesis {}. But if you export without default, you have to import using parenthesis.
export default { Home, Page, Greeting };
I tested your code and there was no problems except if these are not typos:
you haven't imported react in your App.js
you've imported react twice in your Home.js
The only problem I can think of is that you have forgotten to save Home.js.
If you've saved Home.js:
exit you're dev server using ctrl + c and start it again and see if the problem is resolved.
try removing Greeting Component and let us know if you still get errors.
I have 2 pages user.js and nonuser.js and one component header. user.js and nonuser.js have same functionality with slight changes in UI. Now I want to integrate all this. Like when I visit the page by default table of user.js must be viewed. One click of nonuser.js it should change to the nonuser.js table. And I want header to be same for both, content in textbox should not change when I switch between pages.
I'm new to next.js and react
header.js
import React, { Component } from 'react';
import '../Header/header.css';
import { Menu, Input, Icon } from 'antd';
import Link from 'next/link';
class HeaderComponent extends Component {
render() {
return (
<div className="navbar">
<div className="header">
<div className="col-1">
<div className="menu">
<div>
<Link href="/User"><a>Users</a></Link>
</div>
<div>
<Link href="/nonUser"><a>Non Users</a></Link>
</div>
<Input className="text-box" placeholder="Enter name" prefix={<Icon type="search" ></Icon>}></Input>
</div>
</div>
</div>
</div>
)
}
}
export default HeaderComponent
user.js
class User extends Component {
render() {
return (
<React.Fragment>
<div className="ant-table-row">
<div className="table-head-text">
<span className="text">Users({data.length})</span>
<Pagination defaultCurrent={1} total={100} />
</div>
<Table
rowKey={data._id}
columns={this.columns1}
rowSelection={this.rowSelection}
onExpand={this.onExpand}
dataSource={data} />
</div>
</React.Fragment>
)
}
I didn't add nonuser component, its same as user component
index.js
import Header from '../components/Header/header';
import Layout from '../components/Layout';
function App() {
return (
<Header/>
<div>
</div>
)
}
export default App;
I've done this, On first landing the only header is there and on clicking user link in header, header disappears and only table of user is shown.
EDIT:
I tried this header appears in both and I placed a textbox in header .textbox value clears when I switch between pages.
user.js and nonuser.js
render(){
return(
<Layout>
<div>.....</div>
</Layout>
)
}
Also tried
index.js
render() {
return (
<Layout>
<div>
</div>
</Layout>
)
}
layout.js
const Layout = ({children}) => (
<div>
<Header></Header>
{children}
</div>
);
From what I make of your question, you want to use HeaderComponent as a common header for both pages? Then I'd suggest placing it in your components/Layout file. Next will wrap all pages in the layout component, thus adding your header to all pages.
I'm also wondering why you have an index.js file? Unless it's placed in pages/ folder, it isn't something you normally do in Next. The pages user.js and nonuser.js should also be placed in the pages/ folder. Next will then automatically load the to files and provide them under the routes /user and /nonuser (based on the name of the file). This will also make Next wrap each page in the layout component mentioned above.
I'd suggest looking into NextJS learning guide. It provides a very good introduction to NextJS and will make it a lot easier to use NextJS if you. They have a lesson explaining how to use Shared Components which explains exactly what you seem to be looking for.
Hope this helps a bit.
Edit:
Example using _app.js
The following is an example of how to use a custom layout component in next using _app.js. It's based on Nexts own example.
// components/Layout.js
import React, { Component } from 'react';
import Header from './Header';
class Layout extends Component {
render () {
const { children } = this.props
return (
<div className='layout'>
<Header />
{children}
</div>
);
}
}
// pages/_app.js
import React from 'react';
import App from 'next/app';
import Layout from '../components/Layout';
export default class MyApp extends App {
render () {
const { Component, pageProps } = this.props
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
}
To get more information on how to make use of _app.js properly, check out their documentation on custom app.