React学习笔记之十三:React-Router之基础语法和嵌套路由

1.React-Router的基本用法

具体详情可以参考:React-router手册

react-router的几个重要工具

• Router (BrowserRouter)
• Route
• Link

Router

路由器Router: 主要用于包裹整个路由信息和路由跳转信息的容器

Route

路由规则: 用于识别特定的URL后,将页面导向特定的组件(URL -> Component)

Link

路由链路：类似于a标签,将页面跳转到特定的URL

2. 基础路由的例子

// App.js
import React from "react";
import {
    BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import "./App.css";
import Index from "./component/Index.jsx";
import User from "./component/User.jsx";
import Home from "./component/Home.jsx";

function App() {
   
  return (
    <div className="App">
      // Router作为承载路由的容器
      <Router>
        <ul>
          <li>
            // link相当于a标签,点击将U