使用 React Router Dom 时出错

Question

I'm new to React, trying to learn and play around with react router, I'm getting following warnings, error while trying to navigate:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: . Did you accidentally export a JSX literal instead of a component?

Though I never used Fragment anywhere in my code.

When I click on "About Section" to navigate, I get the following error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of App .

Can someone please explain me, what am I doing wrong? Why is that warning coming up in console? Maybe a little more insight about how things work in background would be helpful. Thanks in advance.

Here's my code ->

Index.js -

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

reportWebVitals();

App.js -

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import About from './components/About';
import Main from './components/Main';

function App() {
  const styleObjectApp = {
    backgroundColor: 'pink',
    border: 'solid 1px black',
    padding: '2%',
    margin: '2%',
  };
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Main />} />
          <Route path='about' element={<About />} />
        </Routes>
      </BrowserRouter>
      <div style={styleObjectApp}>
        This is App component!
      </div>
    </>
  );
}

export default App;

Main.js -

import { Link, Outlet } from "react-router-dom";

function Main() {
    const styleObject = {
        border: 'solid 1px black',
        backgroundColor: 'lime',
        padding: '2%',
        margin: '2%',
    }
    return (
        <>
            <div style={styleObject}>
                This is Main Container Component!!
                <div style={{ float: 'right' }}>
                    <Link to='/about'>About Section</Link>
                </div>
            </div>
            <Outlet/>
        </>
    )
}

export default Main;

About.js -

function About() {
    return (
        <>
            This is About Component!!
        </>
    )
}

export default About();

Answer 1

Hello please export a component like this

function About() {
    return (
        <>
            This is About Component!!
        </>
    )
}

export default About;