javascript React 18，react-router-dom，放大-本地主机中出现空白白色

每当我使用“npm start”来给予我一个应用程序的开发者预览时，只有一个空白白色屏幕，这是在我安装react-router-dom并尝试在我的代码中实现它之后开发的。
下面是我的index.js

import React from 'react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createRoot } from 'react-dom/client';
import "@aws-amplify/ui-react/styles.css"; // Ensure React UI libraries are styled correctly
import { Amplify } from 'aws-amplify'
import awsconfig from './aws-exports'
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
Amplify.configure(awsconfig) // Configures the Amplify libraries with the cloud backend set up via the Amplify CLI

import { render } from 'react-dom';
const container = document.getElementById('app');
//render(<App tab="home" />, container);

const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
  <React.StrictMode>
    <Routes>
      <Route path="/" element={<App />}>
      </Route>
    </Routes>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

下面是我的App.js

import React from 'react'
import './App.css';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from './routes/Home';
import NoMatch from './routes/NoMatch';

function App() {
  return (
    <div className="app">
      <Routes>
        <Route path="*" element={<NoMatch />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </div>
  );
}

export default App;

下面是我的主页. js

import React from 'react'

function Home() {
  return(
    <div>
      <h1>Welcome to the home page!</h1>
    </div>
  );
}

export default Home;

我试着查看以前的表单，尝试了许多不同的解决方案，但我真的不能让它工作。以上是我目前拥有的。

新建[文件]：https://i.stack.imgur.com/UlmVb.png
index.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" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

您没有将任何内容呈现到路由器中。请将App Package 在Router中，以便它有可用的路由上下文。
示例：

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createRoot } from 'react-dom/client';
import "@aws-amplify/ui-react/styles.css";
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import { BrowserRouter as Router } from "react-router-dom";

Amplify.configure(awsconfig);

// targets `<div id="root"></div>` in index.html
const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Router> // <-- Wrap App component
      <App />
    </Router>
  </React.StrictMode>
);

App现在不需要导入任何路由器。

import React from 'react'
import './App.css';
import { Route, Routes } from "react-router-dom";
import Home from './routes/Home';
import NoMatch from './routes/NoMatch';

function App() {
  return (
    <div className="app">
      <Routes>
        <Route path="*" element={<NoMatch />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </div>
  );
}

export default App;

javascript React 18，react-router-dom，放大-本地主机中出现空白白色

我试着查看以前的表单，尝试了许多不同的解决方案，但我真的不能让它工作。以上是我目前拥有的。

1条答案

相关问题

热门标签

最新问答