React路由 react-router4.x的基本配置
阿新 • • 發佈:2018-12-21
/* react路由的配置: 1、找到官方文件 https://reacttraining.com/react-router/web/example/basic 2、安裝 cnpm install react-router-dom --save 3、找到專案的根元件引入react-router-dom import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 4、複製官網文件根元件裡面的內容進行修改 (載入的元件要提前引入) <Router> <Link to="/">首頁</Link> <Link to="/news">新聞</Link> <Link to="/product">商品</Link> <Route exact path="/" component={Home} /> <Route path="/news" component={News} /> <Route path="/product" component={Product} /> </Router> exact表示嚴格匹配 */ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import './assets/css/index.css' import Home from './components/Home'; import News from './components/News'; import Product from './components/Product'; class App extends Component { render() { return ( <Router> <div> <header className="title"> <Link to="/">首頁</Link> <Link to="/news">新聞</Link> <Link to="/product">商品</Link> </header> <br /> <hr /> <br /> <Route exact path="/" component={Home} /> <Route path="/news" component={News} /> <Route path="/product" component={Product} /> </div> </Router> ); } } export default App;