react-router-dom5.x的基本使用

• 学习资源推荐

安装

npm install --save react-router-dom

使用

导入

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

• 上述import是es6语法，其中as是取别名用的

简单实例

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from './components/Home'
import News from './components/News'
import Music from './components/Music'

function App() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/news" component={News} />
      <Route path="/music" component={Music} />
    </Router>
  );
}

export default App;

• 注意，每个路由必须被外层的Router包裹
• exact的存在是严格匹配，去掉的话，访问/news实际会渲染Home，News两个组件

Link的使用

• 类似vue的vue-router,实际每个Link默认被渲染为a标签

 	   首页
      新闻
      音乐

官方示例解读

• react-router-dom官方示例解读–上