javascript - 为什么 BrowserRouter 和 Route from 'react-router-dom' 无法正常工作？-6ren

javascript - 为什么 BrowserRouter 和 Route from 'react-router-dom' 无法正常工作？

转载作者：行者123 更新时间：2023-12-05 04:37:40

25

4

这些是名为 my-app 的项目目录的内容.

node_modules
package-lock.json
package.json
public
└── index.html
src
├── App.js
├── index.js
└── pages
    └── Home.js

public/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- all the components are displayed in this #root element -->
    <div id="root"></div>
  </body>
</html>

src/App.js

import {BrowserRouter, Route, Link, Switch} from 'react-router-dom';
import ReactDOM from 'react-dom';
import Home from './pages/Home';

function App() {
        return <>
                <BrowserRouter>
                        <Route exact path="/" component={Home}></Route>
                </BrowserRouter>
        </>;
}
export default App;

src/index.js

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById("root")
);

src/pages/Home.js

function Home() {
        return <h1>Homepage</h1>
}
export default Home;

当我运行 npm start在my-app目录，项目编译时显示以下消息:

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://<network_ip>:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

asset static/js/bundle.js 1.49 MiB [emitted] (name: main) 1 related asset
asset index.html 334 bytes [emitted]
asset asset-manifest.json 190 bytes [emitted]
cached modules 1.39 MiB (javascript) 28.1 KiB (runtime) [cached] 109 modules
webpack 5.66.0 compiled successfully in 1509 ms

当我在网络浏览器上打开 http://localhost:3000 时，我得到一个空白页面，这意味着没有 JSX/HTML 呈现到位于 public/index.html 的 #root div 中。 .只有当我用 BrowserRouter 引入这些行时才会发生这种情况和 Router标签。其他人是否能够重现此错误？我不知道这有什么问题!

编辑:这是我正在使用的节点、npx 和 npm 的版本。

:~$ node -v
v16.13.2
:~$ npm -v
8.1.2
:~$ npx -v
8.1.2

最佳答案

自 react-router-dom v6，它公开的组件的一些 Prop 发生了变化，例如 Route , 和 Switch被 Routes 取代:

这里是你的代码修改以匹配新的变化:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />}></Route>
      </Routes>
    </BrowserRouter>
  );
}
export default App;

此外，不需要 <> (又名 React.Fragment 因为 BrowserRouter 是 jsx 中唯一存在的项目。

关于javascript - 为什么 BrowserRouter 和 Route from 'react-router-dom' 无法正常工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70695020/

25

4

0

文章推荐： javascript - removeAt() 函数是否应该删除删除节点的指针？

文章推荐： build - 动态任务生成器

javascript - BrowserRouter v4 - 'BrowserRouter' 未定义 react/jsx-no-undef
我想在我的 React 应用程序中使用 BrowserRouter。我已将我最顶层的组件嵌套在 BrowserRouter 标签中，如图所示: import React from 'react'; i
javascript - BrowserRouter 与服务器有什么关系？
我读了这个声明: The BrowserRouter should be used when you have a server that will handle dynamic requests (
reactjs - 多个 BrowserRouter 显示多个组件
我想使用 basename 来分隔组件。我也有全局 url，所以我最终使用了 3 个 BrowserRouter。这会导致显示多个内容。如果我去/fruit/search，它会同时显示 Homepag
javascript - 如果子路由附加了组件，如何使用 BrowserRouter？
我是一个新手，无法使用react。我正在关注教程React Tutorial创建注册表单。但这样就已经过时了。我试图通过使用浏览器重定向单击链接来重定向到注册、登录和主页。本教程定义的路线如 cons
javascript - React BrowserRouter - 如何以编程方式导航到不同的路线？
我目前在我的 app.js 文件中有这个: 在我的 CompOne 中，我想以编程方式导航到 CompTwo。我知道我可以使用 wind
javascript - 使用 BrowserRouter 响应空闲计时器
我正在尝试使用 React Idle Timer 在 15 分钟后转到锁定屏幕。我遇到的问题是重定向页面。我正在使用带有反应的 Electron 和 react BrowserRouter。因此我不
javascript - BrowserRouter 中的链接标签仅更改 URL，但不呈现组件
我正在构建一个 Netflix 克隆应用程序，并且正在使用 react-router-dom v5在不同页面之间切换。但是，当我单击 Link标记 Navbar.jsx ，URL 会发生变化，但相应的
reactjs - 在 BrowserRouter 中使用 MemoryRouter
在我的项目中，我必须在不更改 url 的情况下从一个组件导航到另一个组件。为此，我使用了 MemoryRouter这按预期工作。但现在同样的想法应该适用于不同的路线，即 /one和 /two .例如，
reactjs - 如何在静态index.html文件中使用react-router BrowserRouter
我正在尝试使用 npm run build 生成的静态index.html 文件以及react-router。 tl;dr 是;我不需要客户端服务器，我希望通过打开位于构建文件夹中的 index.ht
javascript - Typescript 不允许我在 BrowserRouter 中使用历史记录
尝试使用 React，我决定测试 typescript 。代码: import { BrowserRouter } from 'react-router-dom' import history f
javascript - 忽略 history Prop
我使用的是 React 路由在线类(class)中的以下代码: import { Router, Route, browserHistory } from 'react-router'; ReactD
reactjs - “react-router”不包含名为 'BrowserRouter' 的导出
我正在使用 React-router 版本 5.5.1，并尝试在我的 index.js 文件中使用它: ./src/index.js 14:8-21 'react-router' does not c
javascript - react-router-dom BrowserRouter 在构建后不工作
这是我第一次尝试 React。我使用 create-react-app 创建了一个项目，然后对于路由，我使用 React Router V4 for web react-router-dom . 这是
reactjs - 升级到 v6 时 BrowserRouter basename 属性问题
我正在从 React Router v5 升级到 v6。当我运行应用程序时，url 中没有基本名称，也没有加载任何内容，当我将/config2 添加到 url 时，一切都会显示出来。我在使用 v5 B
javascript - BrowserRouter 导致无效的钩子(Hook)调用。 Hooks 只能在函数组件的主体内部调用
使用时出现以下错误react-router-dom 版本 6 : Uncaught Error: Invalid hook call. Hooks can only be called inside
reactjs - BrowserRouter 与带有 History.push() 的 Router
我试图了解 react-router-dom (v5) 包的 BrowserRouter 和 Router 之间的区别以及它们之间的区别下面是我的例子。文档说: BrowserRouter A th
reactjs - React 中 HashRouter 和 BrowserRouter 有什么区别？
我是编程新手，如果我阅读官方文档，这会让我有点难以理解。我正在阅读有关 React Router 4 from here 的内容在这篇文章中，作者谈论的是和这就是他提到的: HashRoute
javascript - 刷新页面时 BrowserRouter 显示错误 | React-router-v4
使用HashRouter，路由在所有情况下都能正常工作，但是当使用BrowserRouter时，刷新页面时会显示错误。这是我封装在 HashRouter 和 BrowserRouter 下的路由代码
node.js - BrowserRouter 运行错误 - 无效 Hook 调用
这是我的代码: import React from "react"; import ReactDOM from "react-dom"; import Navbar from "./component
node.js - BrowserRouter 运行错误 - 无效 Hook 调用
这是我的代码: import React from "react"; import ReactDOM from "react-dom"; import Navbar from "./component

首页

博学

6Ren·AI

商城

javascript - 为什么 BrowserRouter 和 Route from 'react-router-dom' 无法正常工作？