Next.js Discord

Discord Forum

Error: The default export is not a React Component in page: "/"

Answered
Chestnut-backed Chickadee posted this in #help-forum
Open in Discord
Chestnut-backed ChickadeeOP
Hello everyone im learing next.js to work with my react app so i make this code from dosc and videos on youtube




page.js 

import Image from "next/image";
import styles from "./page.module.css";
import { Router } from "next/navigation";
import { Test } from './test.jsx'
const App = () => {
  return (
    <Router>
      <Router>
        <Router path= '/' element ={Test}/>
      </Router>
    </Router>
  )
}


test.jsx

// Test.jsx
import React from 'react';

const Test = () => {
    return (
        <h1>Hello World</h1>
    );
};

export default Test;

err Error: The default export is not a React Component in page: "/"
Answered by English Spot
have you make your route?
https://nextjs.org/docs/app/building-your-application/routing/defining-routes
View full answer

17 Replies

Chestnut-backed ChickadeeOP
and thanks for everyone
You use curly brackets for importing explicitly
import Test from './test'
English Spot
^ this one
// Test.jsx
import React from 'react';

const Test = () => {
    return (
        <h1>Hello World</h1>
    );
};

export { Test };

or you can change it to this
files be like
import Image from "next/image";
import styles from "./page.module.css";
import { Router } from "next/navigation";
import { Test } from './test'
const App = () => {
  return (
    <Router>
      <Router>
        <Router path= '/' element ={Test}/>
      </Router>
    </Router>
  )
}


// Test.jsx
import React from 'react';

const Test = () => {
    return (
        <h1>Hello World</h1>
    );
};

export { Test };
?
its give me same err
English Spot
import styles from "./page.module.css";
import { Test } from './test'
const App = () => {
  return (
    <Test/>
  )
}

export default App
i dont think you use <Router/>
@English Spot js import styles from "./page.module.css"; import { Test } from './test' const App = () => { return ( <Test/> ) } export default App
Chestnut-backed ChickadeeOP
its works but what if i go to

localhost:3000/help
This page could not be found.
how i can make a page with this url
like react

patch and element
English Spot
have you make your route?
https://nextjs.org/docs/app/building-your-application/routing/defining-routes
Answer