- 安裝
cnpm install react-router-dom --save
- app.js引入
import {BrowserRouter as Router,Route,Link} from "react-router-dom";
- 寫上跳轉(zhuǎn)
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/detail">Detail</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route exact path="/detail" component={Detail} />
</div>
</Router>
（自行創(chuàng)建一個(gè)Detail組件）
app.js
import React from 'react';
import {BrowserRouter as Router,Route,Link} from "react-router-dom";
import './asset/css/App.css';
import Home from "./component/home";
import Detail from "./component/detail";
function App() {
return (
<div className="App">
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/detail">Detail</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route exact path="/detail" component={Detail} />
</div>
</Router>
</div>
);
}
export default App;
home組件
import React, { Component } from 'react';
class Home extends Component {
state = {
name: '數(shù)據(jù)渲染',
age: 10,
lineStyle: {
color: 'orange',
fontWeight: 'bold',
lineHeight: '60px'
}
}
handleClick = (e) => {
this.props.history.push('/detail')
}
render() {
/* ES6的解構(gòu)賦值 */
let { name, age, lineStyle } = this.state;
return (
<div>
{/* 行內(nèi)樣式 --- style={{color: 'red'}} */}
<div onClick={this.handleClick} style={{color: 'red'}}>點(diǎn)擊我跳轉(zhuǎn)到detail頁面</div>
{/* 內(nèi)聯(lián)樣式 --- style={lineStyle} */}
<div style={lineStyle}>{age}</div>
</div>
)
}
}
export default Home;
- 動態(tài)路由
this.props.history.push('/path')
