React 渲染函数不会渲染返回的组件

Question

When I execute npm start , it opens localhost:3000 but doesn't display anything, just a white page.当我执行npm start ，它会打开 localhost:3000 但不显示任何内容，只是一个白页。 Then, I tried to insert a paragraph inside <body> in index.html, and when the page showed up, the text Hello World!然后，我尝试在 index.html 的<body>中插入一个段落，当页面出现时，文本Hello World! only showed for less than 1 second, then disappeared.只出现了不到1秒，然后就消失了。 Any solution would be much appreciated任何解决方案将不胜感激

index.js index.js

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

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

reportWebVitals();

App.js应用程序.js

import React from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route} from "react-router-dom";

import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <Router>
      <div className="container">
        <Navbar />
        <br/>
        <Route path="/" component={ExercisesList} />
        <Route path="/edit/:id" component={EditExercise} />
        <Route path="/create" component={CreateExercise} />
        <Route path="/user" component={CreateUser} />
      </div>
    </Router>
  );
}

export default App;

index.html索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
      <p>Hello World!</p>
    </div>
  </body>
</html>

Answer 1

The problem with my code is the <Route> tags are not wrapped inside <Routes> tag.我的代码的问题是<Route>标签未包含在<Routes>标签内。 This code solves it.这段代码解决了它。

import React from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";

import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <Router>
      <div className="container">
        <Navbar />
        <br/>
        <Routes>
          <Route path="/" component={ExercisesList} />
          <Route path="/edit/:id" component={EditExercise} />
          <Route path="/create" component={CreateExercise} />
          <Route path="/user" component={CreateUser} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

React 渲染函数不会渲染返回的组件

问题描述

1 个解决方案

解决方案1
0 2022-05-15 04:19:37

React 渲染函数不会渲染返回的组件

问题描述

1 个解决方案

解决方案1 0 2022-05-15 04:19:37

解决方案1
0 2022-05-15 04:19:37