Question 275618 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Error in my project: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

I’m trying to create an app but it is facing some issues. When I run the command npm start it started showing this error.

I’m trying to upgrade the react-router-dom from v5 to v6 but I am getting this error message.

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from "react-router-dom"

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
 document.getElementById('root')
);

app.js

import React from 'react'
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'
import Landing from './pages/Landing/Landing'
import ResumeCreate from './pages/ResumeCreate/ResumeCreate'

function App() {
  return (
    <div className="app">
      <Router>
        <Routes>
          <Route path="/" element={<Landing />} />
          <Route path="/create" exact>
            <ResumeCreate />
          </Route>
        </Routes>
      </Router> 
    </div>
  )
}
export default App

Resumecreate.js

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { Route, Routes, BrowserRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { toast, ToastContainer } from 'react-toastify';
import { createBrowserHistory } from 'history';
import classNames from 'classnames';
import constants from '../../config/constants';
import FocusTrap from "../../helpers/app.helper";
import routes from '../../routes';
import "../../styles/App.css"
import "../../styles/darkmode.css"

const history = createBrowserHistory();
const { ROUTES } = constants;
const { Home } = routes;

function ResumeCreate({
  editorOpen,
  toolbarOpen,
  moreVisibilityOpen,
  darkMode,
  autoSave,
}) {
  const [autoSaveToastId, setToastId] = useState('');

  useEffect(() => {
    if (!autoSave) {
      const id = toast.warn(
        'To prevent data loss, download your resume using the Download button or turn on auto save!',
        {
          autoClose: false,
          position: 'bottom-right',
          closeOnClick: false,
        },
      );
      setToastId(id);
    } else {
      toast.dismiss(autoSaveToastId);
      setToastId('');
    }
  }, [autoSave]);

  return (
    <div className={classNames('App', { darkMode })}>
      <ToastContainer
        position="top-center"
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        closeButton={false}
        rtl={false}
      />
      <BrowserRouter history={history}>
        <Routes>
          <Route exact path={ROUTES.HOME.PATH} element={<Home />} />
          <Route path='/' element={<Home />} />
        </Routes>
      </BrowserRouter>
      <FocusTrap full={editorOpen} mobile={toolbarOpen || moreVisibilityOpen} />
    </div>
  );
}

export default connect(mapStateToProps)(ResumeCreate);

Is it problem with the version?

Tags:

2

Answers


  1. 0

    edit your index

    import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <Router  >
     <App />
  </Router>
);

    file code

    Login or Signup to reply.
  2. 0

    There should also be only 1 router per React app. Remove the extraneous routers from App and ResumeCreate since the entire app is already wrapped in a BrowserRouter.

    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
 document.getElementById('root')
);

    ResumeCreate is not a Route component, render it on a Route‘s element prop, not as a child component, and ensure a wildcard splat "*" matcher is appended to it’s route so the descendent routes that ResumeCreate is rendering can also be matched and rendered.

    function App() {
  return (
    <div className="app">
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="/create/*" element={<ResumeCreate />} />
      </Routes>
    </div>
  );
}

    ...
import { Route, Routes } from 'react-router-dom';
...

function ResumeCreate({
  editorOpen,
  toolbarOpen,
  moreVisibilityOpen,
  darkMode,
  autoSave,
}) {
  ....

  return (
    <div className={classNames('App', { darkMode })}>
      <ToastContainer
        ....
      />

      <Routes>
        <Route path={ROUTES.HOME.PATH} element={<Home />} />
        <Route path='/' element={<Home />} />
      </Routes>

      <FocusTrap full={editorOpen} mobile={toolbarOpen || moreVisibilityOpen} />
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search