react-router 路由

根據使用者訪問的地址動態的載入不同的元件

1.安裝

npm install react-router-dom --save

2.引入

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

3.使用
注意：
<1>.要被根元件包裹
<2>.exact 表示嚴格匹配
<3>.path 跳轉的地址 component 載入的元件（需要提前建立並引入）

<Router>
 //要被根元件包裹 
 <div>
    //連結地址
    <Link to='/'>首頁</Link>
    <Link to='/news'>新聞</Link>
          <hr/>
    //載入不同元件
    <Route exact path='/' component={RouterHome}></Route> 
    <Route path='/news' component={RouterNews}></Route> 
</div>
</Router>
 

4.醬醬~ (✧◡✧)

react-router 路由巢狀

1.引入（新聞中心、最新資訊）元件

import NewsMain from './User/NestMain';
import NewsInfo from './User/NestInfo';

2.新聞.js

<div className='content'>
	<div className='left'>
	    //連結地址
		<Link to='/news'>新聞中心</Link><br/><br/> 
		<Link to='/news/info'>最新資訊</Link>
	</div>
	<div className='right'>
		{/* 地址寫法不同 */}
		
		{/* 方法一 */}
		<Route exact path='/news' component={NewsMain}></Route>
		<Route path='/news/info' component={NewsInfo}></Route>
		
		{/* 方法二 */}
		<Route exact path={`${this.props.match.url}/`} component={NewsMain}></Route>
		<Route  path={`${this.props.match.url}/info`} component={NewsInfo}></Route>
	</div>
</div>
 

3.醬醬~ (✧◡✧)