为什么我的 create react app 没有输出？

Question

我正在为使用 React 和 Tailwind 的基本 CRUD 应用程序编写教程，这是我第一次设置它，我正在尝试显示导航栏，但是当我运行 'npm run start'，输出为空白。谁能指导我为什么？接下来：https://www.unimedia.tech/2021/11/30/build-a-simple-crud-app-using-react-and-node/

App.js

import React from "react";
import { Link } from "react-router-dom";
export default function Navigate(){
   return (
       <nav class="flex items-center justify-between flex-wrap bg-green-500 p-6">
       <div class="flex items-center flex-shrink-0 text-white mr-6">
           <span class="font-semibold text-xl tracking-tight">REACT CRUD APP</span>
       </div>
       <Link to="/">
           <button class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-green-500 hover:bg-white mt-4 lg:mt-0">
               HOME
           </button>
       </Link>
       </nav>
   )
}

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Navigate.js

import React from "react";
export default function Navigate(){
   return (
       <nav class="flex items-center justify-between flex-wrap bg-green-500 p-6">
           <div class="flex items-center flex-shrink-0 text-white mr-6">
               <span class="font-semibold text-xl tracking-tight">REACT CRUD APP</span>
           </div>          
           <div>
               <button class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-green-500 hover:bg-white mt-4 lg:mt-0">
                   CREATE
               </button>
           </div>
       </nav>
   )
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

编辑（新输出）：

Answer 1

所以我最近没有使用过 React，所以我不知道新 react-router-dom 版本中是否会发生某些变化，但我确定您需要将 App 组件包装到 <Router></Router> 标签呈现 <Link> 标签。

在 App.js 中进行如下更改，它将显示您的导航栏。

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

export default function Navigate() {
    return (
        <Router>
            <nav class="flex items-center justify-between flex-wrap bg-green-500 p-6">
                <div class="flex items-center flex-shrink-0 text-white mr-6">
                    <span class="font-semibold text-xl tracking-tight">
                        REACT CRUD APP
                    </span>
                </div>
                <Link to="/">
                    <button class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-green-500 hover:bg-white mt-4 lg:mt-0">
                        HOME
                    </button>
                </Link>
            </nav>
        </Router>
    );

让我知道这个解决方案是否可行。

Answer 2

使用此代码更改您的 index.js 文件。要使用 Link，您需要用 <BrowserRouter> 包装 <App/> 组件。此外，最好还添加浏览器控制台的输出屏幕截图，因为大多数情况下您会在那里看到详细的错误。

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

为什么我的 create react app 没有输出？

Why is my create react app giving no output?

node.js

reactjs

crud

tailwind-css