【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>
            {
     /* 
Home
            
About
            
Users
 */}
          </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>;
}

一个通过三个控制着三个页面，

About页面：，

User页面：，

Home页面： 。

的to属性，有个path属性，用来实现路由匹配。

点击不同的会渲染出对应的 。

点击Home，渲染会Home页面，

点击About，会渲染出About页面，

点击Users，会渲染出Home页面。

主要组件

• Router

  Router在应用最顶层，形如：

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

• Route Matcher

  • 
    
  • 
    

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，所以和这两个组件都渲染出来了。

//用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，所以只有这个组件渲染出来了。

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

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

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

可以匹配

/about

/users

/

所以，把放到最后。

<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

  • 
    会渲染成带href属性的，如：
    About会渲染成：About；
    Users会渲染成：Users；
    Home会渲染成：Home。

  • 
    是特殊的，当它的to属性与当前URL匹配时，它会变成active。
    可以通过activeClassName属性设置其激活时的样式：
    

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