React 18、react-router-dom、Amplify - 本地主机中的空白屏幕

Question

Whenever I do "npm start" to give me a developer preview of the application, there is only a blank white screen.每当我执行“npm start”给我应用程序的开发人员预览时，只有一个空白的白色屏幕。 This developed after I installed react-router-dom and tried to implement it in my code.这是在我安装react-router-dom并尝试在我的代码中实现它之后开发的。

Below is my index.js下面是我的 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();

Below is my App.js下面是我的 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;

Below is my Home.js下面是我的 Home.js

import React from 'react'

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

export default Home;

I tried looking at previous forms with the same issue and tried many different solutions, but I couldn't really get it to work.我试着查看以前的 forms 有同样的问题并尝试了许多不同的解决方案，但我无法真正让它工作。 Above is what I currently have.以上是我目前拥有的。

New [Files]: https://i.stack.imgur.com/UlmVb.png新[文件]： https://i.stack.imgur.com/UlmVb.png

index.html 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>

Answer 1

You are not rendering anything into a Router.您没有将任何东西渲染到路由器中。 Wrap the App in the Router so it has a routing context available to it.将App包装在Router中，以便它具有可用的路由上下文。

Example:例子：

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);

const container = document.getElementById('app');

const root = createRoot(container);
root.render(
  <React.StrictMode>
    <Router> // <-- Wrap App component
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

App doesn't need to import any router now. 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;

Answer 2

Thank you !谢谢！ i had the same problem but now it's work我有同样的问题，但现在它的工作

React 18、react-router-dom、Amplify - 本地主机中的空白屏幕

问题描述

2 个解决方案

解决方案1
0 2022-12-22 21:59:26

解决方案2
0 2022-12-27 00:04:24

React 18、react-router-dom、Amplify - 本地主机中的空白屏幕

问题描述

2 个解决方案

解决方案1 0 2022-12-22 21:59:26

解决方案2 0 2022-12-27 00:04:24

解决方案1
0 2022-12-22 21:59:26

解决方案2
0 2022-12-27 00:04:24