RectRouter空白页

发布于 2025-02-06 22:53:59 字数 962 浏览 1 评论 0原文

添加了React-Router-dom中的任何内容后，屏幕变成了空白。我正在使用React-Router 6.3.0和React 17.0.2。

找到了一些解决方案，例如添加到包装

"homepage": ".",

。

"proxy": "http://localhost:3000"

中我试图在代码中找到任何问题，足以仅添加React-Router-dom中的任何内容。

我尝试了正式文档中的默认示例，但未成功。提供的示例Bellow只是一个默认应用程序，其中包含已编辑的app.js文件。

这是一个有效的示例：

    import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';


const App = () => {
  return (
      
      <div>
        <p1>Test</p1>
      </div>
 
  );
};

export default App;

这是不起作用的：

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';


const App = () => {
  return (
      
      <div>
        <p1>Test</p1>
        <Link />
      </div>
 
  );
};

export default App;

谢谢！

原文

After adding anything from react-router-dom the screen became blank.
I'm using react-router 6.3.0 and react 17.0.2.

Found a few solutions like adding to package.json the following:

"homepage": ".",

"proxy": "http://localhost:3000"

But nothing helps. I tried to find any issues in the code, by it's enough to add just anything from react-router-dom.

I tried the default examples from the official documentation, unsuccessfully.
Provided example bellow is just a default app with edited App.js file.

Here is an example that works:

    import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';


const App = () => {
  return (
      
      <div>
        <p1>Test</p1>
      </div>
 
  );
};

export default App;

And this one does not work:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';


const App = () => {
  return (
      
      <div>
        <p1>Test</p1>
        <Link />
      </div>
 
  );
};

export default App;

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界如花海般美丽 2025-02-13 22:54:00

如果您没有用路由器包装应用程序，则必须。尝试这样做，并以“将”作为道具，以便您必须提供此否则，否则它将丢失错误，并且不应自我关闭。

import "./styles.css";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <Link to="/">
        <h2>Start editing to see some magic happen!</h2>
        </Link>
      </div>
    </Router>
  );
}

if you have not wrapped your app with Router, you have to. Try doing that and also takes "to" as a prop so you must provide that otherwise it will throw an error, and it should not be self closing.

import "./styles.css";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <Link to="/">
        <h2>Start editing to see some magic happen!</h2>
        </Link>
      </div>
    </Router>
  );
}

回复收藏 0 原文