React Router升级到4.0后新增了很多api,现在我们仅仅需要使用react-router-dom。
一些核心概念(以下仅仅是我的一些理解,具体请看官网):
path:匹配路径
exact 精准匹配
component匹配组件
render匹配组件中有子路由的时候使用
Link跳转
NavLink导航跳转
Switch 匹配到第一个路由后便不会继续匹配
Redirect 重定向
HashRouter 路径中有#
BrowserRouter 路径中没有#
4.0中匹配默认不是精准匹配,比如现在有两个路径/a /a/ab 匹配/a的时候/a 、/ab均会匹配
- 基本使用
import React from "react";
import {
HashRouter, Route, Link, BrowserRouter } from "react-router-dom";
import About from "./About";
import Topics from "./Tipics";
import Main from "./Main";
export default class Home extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<ul>
<li>
<Link to="/Main"> Main</Link>
</li>
<li>
<Link to="/Topics">Topics</Link>
</li>
<li>
<Link to="/About">About</Link>
</li>
</ul>
<hr /