[英]Components not rendered correctly in React, they do render on browserrefresh
我已經建立了將我的組件鏈接到其頁面的App.js
一切正常。 單擊時頁面已更改。 我還需要為不同的頁面更改標題,所以我制作了一個新的Route-file,例如App.js
,然后創建了我的標題Headers.js
。 該文件包含我在所有頁面上可以擁有的所有可能的標題。 我也將此文件鏈接到index.js
。 現在,我的所有標題都按了更改,就像應該的那樣,但是現在我的實際內容(應用程序本身)卻沒有。 當使用刷新動作時,它會改變,這不是應該的方式。 當我按下鏈接時,我希望一切都發生變化,而不僅僅是標題。 在我的index.html
文件中,指定了<div class="header">
和<div class="root">
。
標頭確實發生了變化,如預期的那樣App.js
的內容沒有變化,刷新頁面時它也發生了變化。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Headers from './components/Header/Headers';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<Headers />, document.getElementById('header'));
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: bitlyshortenedURL i had to delete in stackoverflow cus of errors
serviceWorker.unregister();
App.js
//dependencies
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
//components
import Footer from '../Footer/Footer';
import Home from '../Pages/Home';
import StudentOverview from '../Pages/StudentOverview';
import StudentsPerClass from '../Pages/StudentsPerClass';
import StudentsPerSubject from '../Pages/StudentsPerSubject';
import StudentDetails from '../Pages/StudentDetails';
import Management from '../Pages/Management';
import StudentAdd from '../Pages/StudentAdd';
import Exercise from '../Exercise/Exercise';
import NameWithFaceMC from '../Exercise/NameWithFaceMC';
import NameWithFace from '../Exercise/NameWithFace';
import FaceWithName from '../Exercise/FaceWithName';
//includes
import '../../public/css/kdg-fonts.css';
import '../../public/css/normalize.css';
import '../../public/css/responsive.css';
import '../../public/css/say-my-name.css';
import '../../public/css/style.css';
import '../../public/css/style.min.css';
import '../../public/js/main.js';
//Run
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route exact path='/' component={Home} />
<Route exact path='/studenten' component={StudentOverview} />
<Route exact path='/studentenperklasgroep' component={StudentsPerClass} />
<Route exact path='/studentenpervak' component={StudentsPerSubject} />
<Route exact path='/studenten/detail/:id' component={StudentDetails} />
<Route exact path='/beheer' component={Management} />
<Route exact path='/beheer/add' component={StudentAdd} />
<Route exact path='/oefenen' component={Exercise} />
<Route exact path='/oefenen/nbgmc' component={NameWithFaceMC} />
<Route exact path='/oefenen/nbg' component={NameWithFace} />
<Route exact path='/oefenen/gbn' component={FaceWithName} />
<Route path='*' component={Footer} />
</div>
</Router>
);
}
}
export default App;
package.json
{
"name": "saymyname",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.3"
},
"scripts": {
"dev": "webpack --mode development",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"gulp": "^4.0.0",
"gulp-changed": "^3.2.0",
"gulp-clean-css": "^4.0.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"gulp-uglify": "^3.0.1"
}
}
添加了我在瀏覽器中獲得的視頻: https : //i.gyazo.com/99daa742967947c1e779917bd18a1182.mp4如我所說,該頁面顯示了刷新時應在瀏覽器中顯示的內容。
如果需要更多代碼,屏幕截圖或視頻,請告訴我,我會提供。 提前致謝
我認為問題在於方法:您在index.js中所做的只是實例化了兩個不同的React應用程序,這是錯誤的。
您應該只有一個應用程序入口點(#root div中的App.js),並將Header更改的邏輯放入其中。
有很多方法可以實現您要執行的操作,但這基本上取決於您的標頭彼此之間的差異。
例如,如果更改了文本或鏈接,則可以創建一個通用的Header組件,將其導入到頁面中並將文本,鏈接數組或其他可能需要作為道具的東西傳遞給它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.