資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究React.js 路由
在 React Router v4 之前，React 中的路由是靜態的，但在 v4 更新後，它變成了動態的。在單頁應用程式中，我們只有一個頁面 index.html 和不同的元件，這些元件根據路由顯示。
在非 SPA Web 應用程式中，伺服器在請求時返回一個頁面。要開始路由，首先安裝路由包：
npm install –save react-router-dom
一旦我們使用 create-react-app 建立專案，我們會看到只有一個 html 檔案，即 index.html 和一個名為 App 的元件
現在，我們將建立另外兩個元件 AboutUs.jsx 和 ContactUs.jsx
AboutUs.jsx
import React from 'react'
class AboutUs extends React.Component {
render() {
return <h1> About us </h1>
}
}
export default AboutUs;ContactUs.jsx
import React from 'react';
class ContactUs extends React.Component {
render() {
return <h1> Contact us </h1>
}
}
export default ContactUs;App.jsx
import React from 'react'
class App extends React.Component {
render() {
return (
<div>
<h1>Home</h1>
</div>
)
}
}
export default App;我們現在有三個元件 App、AboutUs、ContactUs.jsx
我們將把這三個元件新增到 index.jsx 檔案中。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
ReactDOM.render(<App />, document.getElementById('root'))Route、Link、BrowserRouter 是我們將從 react-router –dom 中匯入的三個元件，用於實現路由。
import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
ReactDOM.render(<App />, document.getElementById('root'));對於每個路由，我們將需要兩個元素來指定操作。
- 路徑
- 處理該路徑的元件
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
const routs = (
< BrowserRouter >
<div>
<Route path="/" component={App} />
<Route path="/aboutus" component={ AboutUs } />
<Route path="/contactus" component={ ContactUs } />
</div>
</ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'))現在，如果儲存所有檔案並執行 npm start 以檢視操作。
如果我們轉到 localhost:300/aboutus => 我們將看到關於我們的頁面
類似地 localhost:300/contactus => 顯示聯絡我們頁面
但是，如果您注意到了，主頁元件也在其他每個路徑上顯示。這是因為其他路徑中也有“/”，而沒有被精確檢查。
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
const routs = (
<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/aboutus" component={Users} />
<Route path="/contactus" component={Contact} />
</div>
</Router>
);
ReactDOM.render(routs, document.getElementById('root'));我們在 App 元件的路徑中添加了 exact 關鍵字。
現在，如果我們執行應用程式並檢視 aboutus 和 contactus，我們將只會看到這些元件，並且主頁元件不會新增到它們的檢視中。
更新於: 2019年9月4日
2K+ 閱讀量
廣告