Error: [EditPage] is not a component. All component children of must be a or

Question

I'm trying to make my simple webapp with react. I just learned about react router, and I'm usign react-router-dom. I only whant that when I write in the serchbar a page, it returns that page, but it throw some error. The error is the following:

Error: [EditPage] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

The code I'm using is the following:

App.js:

import RouterSetup from './pages/index';

function App() {
  return (
    <>
      <RouterSetup /> 
    </>
  );
}

export default App;

index.js(the file imported in App.js):

import React, {Fragment} from 'react';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
//pages
import Homepage from './HomePage';
import EditorPage from './EditPage';
import Login from './Login';

const RouterSetup = () => {
    return (
        <Router>
            <Fragment>
            <Routes>
                <Route path="/" element={<Homepage />} />

                <Route path="/edit">
                    <EditorPage />
                </Route>

                <Route path="/login">
                    <Login />
                </Route>
            </Routes>
            </Fragment> 
        </Router>
    );
}


export default RouterSetup;

All the other files ar component that works properly, withou error, because I tested them out. I read a bunch of other stackoverflow.com answer, and someone wrote to do like I did in the Route of Homepage, instead the other way, like other two routes, but it doesn't work anyway. I don't know if i'm missing something, or I'm doing it in an uncorrect way. I also reread the dosumentation, but I did't find anything. Can someone help me please?The version of react-router-dom is 6.0.2.Thanks

score 1 · Accepted Answer · answered Nov 22 '21 at 17:15

I think, with RR v6, your child paths do not require the/ prefix. Reading over their documentation last week, it looks like, if 'edit' and 'login' are child states, your routing would become:

import React, {Fragment} from 'react';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
//pages
import Homepage from './HomePage';
import EditorPage from './EditPage';
import Login from './Login';

const RouterSetup = () => {
    return (
        <Router>
            <Fragment>
            <Routes>
                <Route path="/" element={<Homepage />} />

                <Route path="edit">
                    <EditorPage />
                </Route>

                <Route path="login">
                    <Login />
                </Route>
            </Routes>
            </Fragment> 
        </Router>
    );
}


export default RouterSetup;

Error: [EditPage] is not a component. All component children of must be a or

1 Answers1