資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理
社會學
時尚學
法律學React.js 中的巢狀路由
我們有一個 app.jsx 元件
import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';
import Category from './Category';
class App extends Component {
render() {
return (
<div>
<nav className="navbar navbar-light">
<ul className="nav navbar-nav">
<li><Link to="/">Main Page</Link></li>
<li><Link to="/users">Users</Link></li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={MainPage}/>
<Route path="/users" component={Users}/>
</Switch>
</div>
);
}
}
export default App;我們這裡有兩個元件 MainPage 和 Users。MainPage 是我們的主元件，使用 exact 關鍵詞和路徑“/”進行對映
Users 元件是我們執行巢狀路由的地方。實際的巢狀將在 Users 元件內部實現。在 app.jsx 檔案中，我們只會擁有指向 Users 元件的父連結。
在 Users 元件中巢狀
import React from 'react';
import { Link, Route } from 'react-router-dom';
const Users = ({ match }) => {
return(
<div>
<ul>
<li><Link to={`${match.url}/David`}>David</Link></li>
<li><Link to={`${match.url}/Steve`}>Steve</Link></li>
<li><Link to={`${match.url}/John`}>John</Link></li>
</ul>
<Route path={`${match.path}/:name`} render= {({match}) =>( <div><h3> {match.params.name} </h3></div>)}/>
</div>
)
}
export default Users;match 物件包含路徑 /users，:name 屬性包含針對特定使用者的巢狀。我們還在 Users 中建立了 Link 元件，用於導航到特定使用者。
請注意，使用了 Users 元件中 Route 路徑上的 render 屬性。Render 正在執行函式以顯示使用者。
更新於: 2019 年 9 月 4 日
384 次觀看
廣告