'Home'已定義但從未使用no-unused-vars".*

我是反應新手。

我制作了一個名為 Avatar 的組件，如果單擊它，我想鏈接到主頁。

*編譯時出現以下錯誤：“Line 9:12: 'Home' is defined but never used no-unused-vars”。

所以，我的問題是如何正確地將頭像圖示鏈接到在 ./Auth.js 中宣告的主頁？

BookList.js 這是我當前的代碼。

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" element={<Home />}> //Recent add
      <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>
    );
  }
}

阿凡達.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;

請不要猶豫，讓我知道是否有辦法改善我的問題

uj5u.com熱心網友回復：

目前在您的RouteAvatarClick組件中，您提供了路徑（“/Home”），但沒有提供當用戶在該路線上時要呈現的元素/組件。RouteAvatarClick在你的組件中嘗試這樣的事情：

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

然后導航到/Home您的瀏覽器 ( http:localhost:3000/Home) 看看是否有幫助！<3

PSelement道具假設您使用的是react-router v6。如果您使用的是 v5，它將是component={Home}.

標籤：javascript 反应

上一篇：創建具有最小和最大輸入的乘法表

下一篇：異步呼叫堆疊執行間隙