从reactjs获取空白页

Question

以下代码片段给了我这个错误。

Line 2:10:  'navBar' is defined but never used  no-unused-vars

我在做什么错？

app.js

import React from 'react'
import { navBar } from './components/navBar'

const App = () => {
  return (
      <navBar/>
  )
}

export default App

navbar.js

import React from 'react';
import {  Link } from "react-router-dom";
const navBar= () =>{
  return (
  <div>
    <li>
      <Link to="/">Dogs</Link>
    </li>
    <li>
      <Link to="/cats">Cats</Link>
    </li>
    <li>
      <Link to="/sheeps">Sheeps</Link>
    </li>
    <li>
      <Link to="/goats">Goats</Link>
    </li>
  </div>
  );
}
export default navBar

Answer 1

创建React组件时，组件的名称必须从上案字母开始。

如果使用导出默认，则无需使用{}
只需在没有{}的情况下导入并使用

从'./components/navbar'导入navbar

Answer 2

＆lt; link＆gt;组件应该在browserrouter中使用。

import React from "react";
import { Link, BrowserRouter as Router } from "react-router-dom";

export default function NavBar() {
  return (
    <Router>
        <ul>
          <li>
            <Link to="/">Dogs</Link>
          </li>
          <li>
            <Link to="/cats">Cats</Link>
          </li>
          <li>
            <Link to="/sheeps">Sheeps</Link>
          </li>
          <li>
            <Link to="/goats">Goats</Link>
          </li>
        </ul>
    </Router>
  );
}

Answer 3

因为您使用导出默认值，因此您应该修复

import navBar from './components/NavBar'

并命名为“纳维布”的编码会议。

Answer 4

React是一个页面框架，因此您需要动态地更改组件，请使用React路由器。如果您需要处理页面作为公共访问，则可以使用 nextjs 。它具有基于induild文件的路由

：NextJS具有服务器端渲染，因此请注意，当您构建动态数据更新时