react. js components are not rendering inside routes paths

Question

I am trying to make some animated path routes with framer-motion but components are not appearing and apparently there is an error saying that routes Home,Contact and about cannot be resolved in routesWithAnimation.js.

import { useLocation } from "react-router-dom";
import { Home } from "./components/Home";
import { About } from "./components/About";
import { Contact } from "./components/Contact";
import { Routes, Route } from "react-router-dom";

function RoutesWithAnimation() {
  const location = useLocation();
  return (
    <Routes location={location} key={location.key}>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default RoutesWithAnimation;

I tryed to use "export default" and "export" and still the same,also, I tried to import the components with and without brakets, and the same error again.I check the names of the components and routes matched and also I actualized react-router-dom This is App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { useLocation } from "react-router-dom";
import Header from "./components/Header";
import LocationProvider from "./components/locationProvider";
import RoutesWithAnimation from "./components/routesWithAnimation";                                            
import React from "react";
import "./App.css";

function App() {
  return (
    <BrowserRouter>
      <Header />
      <LocationProvider>
        <RoutesWithAnimation />
      </LocationProvider>
    </BrowserRouter>
  );
}

export default App;

This is home,js

import { motion } from "framer-motion";
import React from "react";

const routeVariants = {
  initial: {
    y: "100vh",
  },
  final: {
    y: "0vh",
  },
};

export function Home() {
  return (
    <motion.div
      variants={routeVariants}
      initial="initial"
      animate="final"
      className="home component"
    >
      <h1> Home Component </h1>
    </motion.div>
  );
}

This is contact

import React from "react";
import { motion } from "framer-motion";

const routeVariants = {
  initial: {
    y: "100vh",
  },
  final: {
    y: "0vh",
  },
};

export function Contact() {
  return (
    <motion.div
      variants={routeVariants}
      initial="initial"
      animate="final"
      className="contact component"
    >
      <h1> Contact Component </h1>
    </motion.div>
  );
}

This is about.js

import React from "react";
import { motion } from "framer-motion";

const routeVariants = {
  initial: {
    y: "100vh",
  },
  final: {
    y: "0vh",
  },
};

export function About() {
  return (
    <motion.div
      variants={routeVariants}
      initial="initial"
      animate="final"
      className="about component"
    >
      <h1> About Component </h1>
    </motion.div>
  );
}

I have check and I finally identify the correct path file. Thanks a lot!. They were in the same file path and I passed them wrong — Andrea Lopez Bravo, Apr 11 '23 at 18:39

score 0 · Answer 1 · answered Apr 11 '23 at 18:42

0

They were in the same file path, so instead of ./components/Home, ./components/About and ./components/Contact, it was ./Home – ./About and ./Contact

answered Apr 11 '23 at 18:42

Andrea Lopez Bravo

155
2
2
11

react. js components are not rendering inside routes paths

1 Answers1