react-router
SSR 與 CSR ?
SSR => server side render
CSR => client side render
SSR
app.get('/', function (req, res) {
res.send('hello world');
})
app.get('/hello', function (req, res) {
res.send('你好');
})
app.get('/hello/:name', function (req, res) {
res.send('你好, ' + req.params.name);
})CSR
<Switch>
<Route path="/evaluations/:evaluationId/presentation" render={() => null} />
<Route path="/cases/:programId" render={() => null} />
<Route path="/cases/:programId/recusals/:recusalIndex/print" render={() => null} />
<Route component={SiteHeader} />
</Switch>所以 CSR 可以幹嘛 ？
- SPA(Single Page Application)
畫面僅需 重新 render 所需要改變的部分 - 通過管理 URL，實現頁面以及狀態切換
可以「模組化」
click <Link />
switch URL
render component
環境建置
沒啥特別 => 看
基本操作 <Route> <Link>
function App() {
return (
<Router>
<div>
<Header />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
}你在的頁面
想要切換渲染的 component
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about/">About</Link>
</li>
<li>
<Link to="/users/">Users</Link>
</li>
</ul>
</nav>link 提供一個
超連結到對應的
網址
click <Link />
switch URL
render component
隨著需要的頁面越多，變化開始有越來越多對應的網址
例如：部落格的文章頁面，商城的商品頁
那怎麼能一次把這些需求寫死吧？
因此，我們要用 “參數” 來指定 routing 的規則。
<Route path="/posts/:id?" component={PostRender} / >
<Route path="/posts/:id?" component={PostRender} / >
- 當你定義這行時，你事實上就定義了指定的 component (i.e. PostRender) 的 props.match.params 多了一個 “id” 這個 property
- 換句話說，當你連結 “…/posts/3838” 的時候，就等於把 3838 當作參數傳給 PostRender 的 props.match.params.id, 你可以在 PostRender 裡頭根據 id 去處理拿到文章的邏輯。
因此子層的 component會這樣寫
function ProgramDetailPage({
match: {
params: {
programId,
},
},
}: ContextRouter) {
return (
<div style={styles.container}>
<Query
variables={{
id: programId,
}}
query={SCHEDULED_PROGRAM_DETAIL}>
{({ loading }) => {
if (loading) return <LoadingSpinner />;
return (
...
);
}
exact: bool
When true, will only match if the path matches the location.pathname exactly.
// 列舉所有文章
<Route exact path="/posts" component={Posts} />
// 展示某篇文章
<Route path="/posts/:id?" component={PostRender} />react-router
By Jay Chou
