Блог

Главная - Вопросы по программированию - Маршрутизатор React не загружает компонент

Маршрутизатор React не загружает компонент

#reactjs #react-router

Вопрос:

Я относительно новичок в Реагировании и ни за что на свете не могу понять, почему это не работает!

Этот код не загружает компонент приложения внутри маршрутизатора, но он загружается при самостоятельном возврате. Пример ниже

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

При этом на экране ничего не загружается. Однако, когда я удаляю маршрутизатор, я вижу загрузку компонента приложения:

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

Наконец, это мой компонент приложения (хотя не думаю, что вам это нужно)

 import React from "react";

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

Это построено на приложении Ruby on Rails, если это имеет значение

Комментарии:

1. какая у тебя версия react-router-dom ?

Ответ №1:

если вы используете v5 react-router-dom :

 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-dom v6

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

Ответ №2:

Вместо

 import { Router, Route } from "react-router-dom";

пробовать

 import { BrowserRouter, Route } from "react-router-dom";

Комментарии:

1. по-прежнему ничего import React from "react"; import ReactDOM from "react-dom"; import App from "../components/App"; import { BrowserRouter, Route, Switch } from "react-router-dom"; document.addEventListener("DOMContentLoaded", () => { ReactDOM.render( <BrowserRouter> <Route path="/"> <App /> </Route> </BrowserRouter>, document.body.appendChild(document.createElement("div")) ); });

Ответ №3:

Какие версии react и react-router-dom вы используете? Это работает для меня по-новому npx create-react-app :

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

    document.body.appendChild(document.createElement("div"))
  );
});

Ответ №4:

Исправлено:

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