时间戳

首页 > 解决方案 > 反应路由器不加载组件

reactjs - 反应路由器不加载组件

问题描述

我对 React 比较陌生，我一生都无法弄清楚为什么这不起作用！

此代码不会在路由器内加载 App 组件，但它会在独立返回时加载。下面的例子

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { Router, Route } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Router>
      <Route path="/">
        <App />
      </Route>
    </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});

屏幕上没有任何内容。但是，当我删除路由器时，我看到 App 组件加载：

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { Router, Route } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <App />,
    // <Router>
    //   <Route path="/">
    //     <App />
    //   </Route>
    // </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});

最后，这是我的 App 组件（虽然不认为你需要这个）

import React from "react";

const App = () => {
  return <div>app has loaded</div>;
};
export default App;

这是基于 Ruby on Rails 应用程序构建的，如果这很重要的话

标签： reactjsreact-router

解决方案

如果您使用的是react-router-domv5：

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Router>
      <Switch>
         <Route path="/">
            <App />
         </Route>
      </Switch>
    </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});

如果您使用的是react-router-domv6

import React from "react";
import ReactDOM from "react-dom";
import App from "../components/App";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Router>
      <Routes>
         <Route path="/" element={<App />} />
      </Routes>
    </Router>,
    document.body.appendChild(document.createElement("div"))
  );
});

推荐阅读