【react-router】上手react-router

import React from "react";
// import "./app.css";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  // NavLink
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/users">Users</Link></li>
            {/* <li><NavLink to="/" activeClassName="highlight">Home</NavLink></li>
            <li><NavLink to="/about" activeClassName="highlight">About</NavLink></li>
            <li><NavLink to="/users" activeClassName="highlight">Users</NavLink></li> */}
          </ul>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

一个<Router>通过三个<Route/>控制着三个页面，

About页面：<Route path="/about"><About /></Router>，

User页面：<Route path="/users"><Users /></Route>，

Home页面：<Route path="/"><Home /></Route> 。

<Link/>的to属性，<Route/>有个path属性，用来实现路由匹配。

点击不同的<Link/>会渲染出对应的<Route/> 。

点击<Link to="/">Home</Link>，渲染会Home页面，

点击<Link to="/about">About</Link>，会渲染出About页面，

点击<Link to="/users">Users</Link>，会渲染出Home页面。

主要组件

• Router

  • <BrowserRouter>
  • <HashRouter>

  Router在应用最顶层，形如：

  ReactDOM.render(
      <BrowserRouter>
      <App/>
      </BrowserRouter>
  )
  

• Route Matcher

  • <Switch>
    
  • <Route>
    

function Item(){
    const params = useParams();
    return <div>current id is :{params.id}</div>
}

function About(){
    return <div>About</div>
}

function Users(){
    return <div>Users</div>
}

function Home(){
    return <div>Home</div>
}

//不用Switch
<Router>
    <ul>
        <li><Link to="/home">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/users">Users</Link></li>
    </ul>
    <Route path="/home"><Home/></Route>
    <Route path="/about"><About/></Route>
    <Route path="/users"><Users/></Route>
    <Route path="/:id"><Item/></Route>
</Router>

当前URL为/home时，同时匹配了/home和/:id，所以<Home/>和<Item/>这两个组件都渲染出来了。

//用Switch
<Router>
    <ul>
        <li><Link to="/home">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/users">Users</Link></li>
    </ul>
    <Switch>
        <Route path="/home"><Home/></Route>
        <Route path="/about"><About/></Route>
        <Route path="/users"><Users/></Route>
        <Route path="/:id"><Item/></Route>
    </Switch>
</Router>

这时，当前URL为/home时，仅仅匹配了/home，所以只有<Home/>这个组件渲染出来了。

<Switch>是用来渲染第一个与当前URL匹配的 <Route>或<Redirect>，
如果 <Route>的path属性或<Redirect>的from属性与当前URL匹配。
所以，通常我们会把<Route>放到<Switch>里，即 让<Route>成为<Switch>的子元素，形如：

<Switch>
  <Route path />
  <Route path />
  <Route path />
</Switch>

渲染Switch时，会在其所有子元素中查找与当前URL匹配的Route，一旦找到匹配项，随即渲染该Route，不再往后匹配查找。
这也意味着，Route的path越详细，应该越往前排。
如果没有匹配项，则返回null。

<Route path="/" />可以匹配

/about

/users

/

所以，把<Route path="/" />放到最后。

<Switch>
  <Route path="/about" />
  <Route path="/users" />
  <Route path="/" />
</Switch>

或者

<Switch>
  <Route exact path="/" />
  <Route path="/about" />
  <Route path="/users" />
</Switch>

exact path="/"会准确匹配 /。

<Switch> 
    <Route exact path="/"></Route>
    <Route path="/about"></Route>
    <Route path="/users"></Route>
    <Route path="*"></Route>
</Switch>

path="*"放最后，它会匹配除/、/about、/users以外的任意路径。

• Navigation

  • <Link>
<Link>会渲染成带href属性的<a>，如：
    <Link to="/about">About</Link>会渲染成：<a href="/about">About</a>；
    <Link to="/users">Users</Link>会渲染成：<a href="/users">Users</a>；
    <Link to="/">Home</Link>会渲染成：<a href="/">Home</a>。

  • <NavLink>
<NavLink>是特殊的<Link>，当它的to属性与当前URL匹配时，它会变成active。
    可以通过activeClassName属性设置其激活时的样式：
    <NavLink to="/home" activeClassName="highlight">

  • <Redirect>
<Redirect to>
to属性是一个字符串，也可以是一个对象。