Компоненты React не отображаются на сервере
Я только начинаю изучать React и мне интересно, почему компоненты не загружаются. Предварительно я использовал устаревший код, от которого не уверен, что полностью избавился.
Я пробовал как путь, так и точный_путь, 's и т. д. Я также пытался просмотреть другие вопросы, но, похоже, у меня это не получилось.
домашняя страница.js:
import React, { Component } from 'react';
import RoomJoinPage from './RoomJoinPage';
import CreateRoomPage from './CreateRoomPage';
import { BrowserRouter as Router, Routes, Route }from 'react-router-dom';
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Router>
<Routes>
<Route path='/' element = {<p>This is the homepage</p>} />
<Route path='/join' element = {<RoomJoinPage/>} />
<Route path='/create' element = {<CreateRoomPage/>} />
</Routes>
</Router>
);
}
}
Приложение.js:
import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./homepage";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);
Я также добавил путь в URL-адрес внешнего интерфейса.
from django.urls import path
from .views import index
urlpatterns = [
path('', index),
path('join', index),
path('create', index)
]
Какая у вас версия маршрутизатора React?
Обратите внимание, что конструктор является излишним: вы можете опустить его, и среда выполнения автоматически вызовет super с аргументами. Если бы вы использовали линтер, он должен был бы вам сказать, что...
Вы также, похоже, очень запутались в вопросах маршрутизации на стороне клиента и традиционной маршрутизации. Ваш реагирующий маршрутизатор не будет вызывать эти конечные точки в вашем приложении django.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Не стесняйтесь использовать консоль для проверки элемента, чтобы увидеть, какие ошибки. Начиная новый проект реагирования, постарайтесь сохранить index.js, а затем поработать над структурой вашего проекта. Поэтому я постарался быстро взять структуру вашего проекта и стать хорошей отправной точкой.
Итак, у нас есть index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();Затем App.js
import React from "react";
import HomePage from "./components/HomePage";
function App() {
return (
<div>
<HomePage />
</div>
);
}
export default App;и «компоненты»:
Домашняя страница.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import RoomJoinPage from './RoomJoinPage';
import CreateRoomPage from './CreateRoomPage';
function HomePage() {
return (
<Router>
<Routes>
<Route path='/' element = {<p>This is the homepage</p>} />
<Route path='/join' element = {<RoomJoinPage />} />
<Route path='/create' element = {<CreateRoomPage />} />
</Routes>
</Router>
);
}
export default HomePage;CreateRoomPage.js
import React from 'react';
function CreateRoomPage() {
return <div>This is create page</div>;
}
export default CreateRoomPage;RoomJoinPage.js
import React from 'react';
function RoomJoinPage() {
return <div>This is join page</div>;
}
export default RoomJoinPage;Вот и все. Вы можете видеть, что мы вызываем компонент создания и присоединения только в homepage.js, а не в app.js, поскольку app.js уже вызывает домашнюю страницу с включенным импортом.
При этом вы должны получить доступ к своей странице «Присоединиться и создать» при вводе /join или /create.
ОП, похоже, ожидает, что React Router достигнет этих конечных точек URL-адресов на сервере. Вы видели код django внизу вопроса?
Если вы только начинаете, обратите внимание на новую документацию и обратите внимание, что функциональные компоненты (
function MyCompoment(props) { ... }) теперь являются поддерживаемой парадигмой. То есть компоненты на основе классов (class MyComponent extends Component) раньше не поощрялись, но сейчас активно получают меньшую поддержку.