[英]Why is only the first React component rendering in my multi-page in Django app?
我正在嘗試將輔助組件呈現到我的 Django 應用程序的 React 前端中的不同 URL。 URL 似乎設置正確,因為頁面標題正在相應更改並且沒有引發錯誤,但頁面本身是空白的。 我的組件是通過導入組件目錄中的index.js
來加載的。
#index.js
import App from './components/App';
import Viz from './components/Viz';
#urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index),
path('viz/', views.getviz)
]
為了測試的簡單性,我將組件復制了一份,所以我知道它可以工作。
// App.js
import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import Header from './layout/Header';
import Dashboard from './splits/Dashboard';
import Alerts from './layout/Alerts';
import { Provider } from 'react-redux';
import { Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';
import store from '../store';
//Alert Options
const alertOptions = {
timeout: 3000,
position: 'bottom center'
}
class App extends Component {
render() {
return (
<Provider store={store}>
<AlertProvider template={AlertTemplate} {...alertOptions}>
<Fragment>
<Header />
<Alerts />
<div className="container">
<Dashboard />
</div>
</Fragment>
</AlertProvider>
</Provider>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'))
與其他文件的唯一區別是組件名稱和元素 ID 的替換分別從App/app
-> Viz/viz
更改。 我將其用作我的index.html
,僅切換了元素 ID:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>viz</title>
</head>
<body>
<div id="app"></div>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
我意識到只有在index.js
中首先放置的組件被加載(我嘗試切換它們確認它),所以我想在加載多個組件而不是一個時我需要做一些額外的事情 - 但我可以'想不通。 有任何想法嗎?
根據@TonyN 評論的建議,我設法讓react-router方法運行良好。
我將App.js
重新組織為路由器的主頁,並將我的組件引入如下:
import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import UploadPage from './UploadPage';
import Viz from './Viz';
import { BrowserRouter as Router, Routes, Route, Link, Redirect } from 'react-router-dom'
export default class App extends Component {
render() {
return (
<div>
<Router>
<Routes>
<Route exact path='/' element={ <UploadPage />} />
<Route exact path='/viz' element={ <Viz /> } />
</Routes>
</Router>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
這讓我只有一個渲染。 只有其他更新是 django 端的 url:
from django.urls import path
from . import views
urlpatterns = [
path('', views.index),
path('viz', views.index)
]
我現在對這種互動有了更好的理解,所以感謝您為我指明了正確的方向。
這個視頻教程也幫助我實現了它,所以我也會把它留在這里。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.