'Home' 已定义但从未使用 no-unused-vars".*

Question

I'm new to React.

I've made a component called Avatar which I want to link to a home page if clicked.

* When compiling I get the following error: "Line 9:12: 'Home' is defined but never used no-unused-vars".

So, my question is how do I correctly link the Avatar Icon to Home that's declared in ./Auth.js ?

BookList.js Here is my current code.

 import React from "react"; import Book from "./Book"; import { BookContext } from "../context/BookContext"; import { ThemeContext } from "../context/ThemeContext"; import "./index.css"; import "./BookList.css"; import Avatar from "./Avatar" import {BrowserRouter, Route} from "react-router-dom"; import Home from "./Auth"; const RouteAvatarClick = () => { <BrowserRouter> <Route exact path="/Home"> //Tried to link Home from ./Auth <Avatar /> </Route> </BrowserRouter> } export default class BookList extends React.Component { render() { return ( <ThemeContext.Consumer> {(contextTheme) => ( <BookContext.Consumer> {(contextBook) => { const { books } = contextBook; const { changeColorTheme, isDarkMode, dark, light} = contextTheme; const theme = isDarkMode ? dark : light; //Conditional return ( <section className="page-section" style={{ backgroundColor: theme.bg, color: theme.color }} id="portfolio"> <div className="container"> <div><RouteAvatarClick/></div> <div className="text-right"><button className="btn btn-danger" onClick={changeColorTheme}>Change Mood</button></div> <div className="text-center"> <h2 className="section-heading text-uppercase">My Book Folio</h2> <h3 className="section-subheading text-muted">Books I would like to read.</h3></div> <div className="row"> {books.map((book, index) => { return <Book book={book} key={index} />; })} </div> </div> </section> ); }} </BookContext.Consumer> )} </ThemeContext.Consumer> ); } }

Avatar.jsx

 import React from 'react'; import "./Avatar.css"; const Avatar = ({className, src, alt, ...props}) => { return ( <div> {src? ( <img className={`defaultClass ${className}`} src={src} alt={alt} /> ) : ( <img {...props} //If we want to use other images className={`defaultClass ${className}`} src={"https://i.pinimg.com/736x/49/f7/25/49f725a9f2b62ea80603f3fe51289735--le-design-icon-design.jpg"} alt={alt} /> )} </div> ); } export default Avatar

Auth.js

 import React from "react"; const Home = () => ( <div> <h1 className="title is-1">This is the Home Page</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida, risus at dapibus aliquet, elit quam scelerisque tortor, nec accumsan eros nulla interdum justo. Pellentesque dignissim, sapien et congue rutrum, lorem tortor dapibus turpis, sit amet vestibulum eros mi et odio. </p> </div> ); export default Home;

Please don't hesitate to let me know if there's a way to improve my question

Answer 1

Currently in your RouteAvatarClick component, you've provided the path ("/Home"), but not the element/component to render when the user is on that route. Try something like this in your RouteAvatarClick component:

<Route exact path="/Home" element={<Home />}>

Then navigate to /Home in your browser ( http:localhost:3000/Home ) and see if that helps! <3

PS The element prop is assuming you're using react-router v6. If you're using v5, it'll be component={Home} .