react-router v5

逃离我推掉我的手 2023-02-22 05:09 17阅读 0赞

# 一、简介 #

1.  首先，安装create-react-app并创建一个新项目。

代码块
    npx create-react-app demo-app
    cd demo-app
    2、安装 react-router-dom

代码块
    npm install react-router-dom

1.  简单体验  
    例1：基本路由  
    将以下任一示例复制/粘贴到中src/App.js。在此示例中，路由器处理了3个“页面”：Home，About页面和Users页面。在不同的s 上单击时，路由器将呈现匹配项

代码块
    航或屏幕阅读器的人仍然可以使用此应用。import React from "react";
    import { 
      BrowserRouter as Router,
      Switch,
      Route,
      Link
    } from "react-router-dom";
    
    export default function App() { 
      return (
        <Router>
          <div>
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/users">Users</Link>
                </li>
              </ul>
            </nav>
    
            { /* A <Switch> looks through its children <Route>s and
                renders the first one that matches the current URL. */}
            <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>;
    }

# 二、主要组成 #

## 1. React Router中的组件主要分为三类 ##

路由器，<BrowserRouter>和<HashRouter>
    路线匹配器，例如<Route>和<Switch>
    导航，<Link>，<NavLink>和<Redirect>

一般都导入

代码块
    import {  BrowserRouter, Route, Link } from "react-router-dom";

## 2. 路由器 ##

1.  每个React Router应用程序的核心应该是路由器组件。对于Web项目，react-router-dom提供`<BrowserRouter>和<HashRouter>`路由器。两者之间的主要区别在于它们存储URL和与Web服务器通信的方式。  
    `<BrowserRouter`>使用常规的URL路径。这些通常是外观最好的URL，但是它们要求正确配置服务器。具体来说，您的Web服务器需要在所有由React Router客户端管理的URL上提供相同的页面。Create React App在开发中即开即用地支持此功能，并附带有关如何配置生产服务器的说明。  
    `<HashRouter>`将当前位置存储在URL的hash一部分中，因此URL看起来像http://example.com/\#/your/page。由于哈希从不发送到服务器，因此这意味着不需要特殊的服务器配置。  
    通常来说，如果你有一个服务器来响应请求，那就使用< BrowserRouter >。如果你是用静态文件来提供服务，那么就使用 < HashRouter >
2.  要使用路由器，只需确保将其呈现在元素层次结构的根目录下即可

代码块
    import React from "react";
    import ReactDOM from "react-dom";
    import {  BrowserRouter } from "react-router-dom";
    
    function App() { 
      return <h1>Hello React Router</h1>;
    }
    
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById("root")
    );

## 3. 路线匹配器 ##

1.有两个路由匹配组件：Switch和Route。  
`<Switch>`被渲染，它会搜索其children `<Route>`内容找到一个其path当前的URL匹配。当找到一个对象时，它将渲染该对象，忽略所有其他对象。这意味着应该将`<Route>s`的特定性更高（通常更长）放在不那么特定的paths 之前。如果没有`<Route>`匹配项，则`<Switch>`呈现器不呈现任何内容（null）。  
需要注意的重要一件事是 `<Route path>`匹配URL 的开头，而不是整个开头。因此，`a <Route path="/">`将始终与网址匹配。因此，通常将这放在`<Route>`最后。另一种可能的解决方案是使用`<Route exact path="/">`它不符合整个URL。

## 4. 导航 ##

1.React Router提供了一个在应用程序中创建链接的组件。  
2.`<NavLink>`，它将在与当前URL匹配时将样式属性添加到呈现的元素。  
3.每当您要强制导航时,使用`<Redirect>`

代码块
    <NavLink to="/react" activeClassName="hurray">
      React
    </NavLink>
    
    // When the URL is /react, this renders:
    // <a href="/react" className="hurray">React</a>
    
    // When it's something else:
    // <a href="/react">React</a>

## 5. React Router 的使用 ##

1.在对Route进行配置的时候，我们可以传以下参数：path、exact、component、render、children 。这些参数都不是必须的.

代码块
    <Route component={ Wallet} />
    //在配置Route的时候没有指定 path 属性，这时只要你打开项目，无论你访问什么路径，这个Route都会匹配到。
    
    <Route path="/" component={ Index} />
    //配置Route的时候，指定 path="/" ，和上面配置的效果一样，只要你打开项目，无论你访问什么路径，这个Route都会匹配到。这种配置方式我们成为 "非严格匹配" ，你在项目中访问的任何一个路径，里面都会包含path="/" 的路径。所以无论访问
    //什么路径，这个Route都会匹配到。
    
    <Route exact path="/" component={ Index} />
    //和上面一条的配置方式不同，这里在配置Route的时候，传入了 exact  属性，说明这个配置方式是 "严格匹配" ，只有当我们访问项目的根路径的时候，才会匹配到这个Route。比如：localhost:3000/ 。
    
    <Route path="/help" component={ Help} />
    //一条很常规的Route配置方式，当我们访问"/help"路径的时候，匹配到这个Route，进而渲染出对应的component。
    
    <Route path="/render" render={  () => {  return <h1>我是匹配到的路由</h1> } } />
    和上一条路由配置不同的是，这里没有component属性，而是换成了render属性。该属性是一个函数，当匹配到这个Route的时候，页面将会渲染出这个函数返回的内容。
    
    <Route path="/render" children={ ({  match }) => (
            <li className={ match ? "active" : ""}>
              <Link to={ to} { ...rest} />
            </li>
          )} />
    //有些情况下，不管路径是否与位置匹配，你都需要去渲染一些东西，在这种情况下，你可以使用 childen ，除了不论是否匹配它都会被调用以外，它的工作原理与 render 完全一样。

2. Switch 组件的使用

Switch组件的使用其实非常简单，举个例子：如果说BrowserRouter组件是一个大的文具盒的话，那么Switch组件就是这个大文具盒中的一个小袋子，Route组件就是这个小袋子中的一支铅笔，我们需要铅笔的时候，直接从这个小袋子里面取出一支即可。

注意：是最多只能取出一支铅笔。也就是说，当进行路由匹配的时候，一旦匹配到了Switch组件中的一个Route，那么就不会再继续匹配。

3.如何配置嵌套路由

嵌套路由，顾名思义就是在一个主路由匹配到的页面中再配置一些路由

代码块
    //假设目前已经有了一级路由页面set,现在配置set里面的二级路由
    class Set extends Component { 
        componentDidMount() { 
            // 当前页面匹配到的路径，这里是"/set"
            // 使用这个路径，配置Route和Link
            console.log(this.props.match.path);
        }
    
        render() { 
            return (
                <div className="set-box">
                    个人设置 - 页面
    
                    <div className="link-list">
                        <Link to={ `${ this.props.match.path}/system`}>system</Link>
                        <Link to={ `${ this.props.match.path}/person`}>person</Link>
                        <Link to={ `${ this.props.match.path}/time`}>time</Link>
                    </div>
    
                    <div className="child-router">
                        <Route path={ `${ this.props.match.path}/system`} component={ SetSystem} />
                        <Route path={ `${ this.props.match.path}/person`} component={ SetPerson} />
                        <Route path={ `${ this.props.match.path}/time`} component={ SetTime} />
                    </div>
                </div>
            );
        }
    }
    
    export default Set;

注意：匹配到的Route会在 当前位置 渲染匹配到的内容(这个内容可能是component组件，render函数返回的结果等)。就是因为React Router的这个特性，我们才能配置嵌套路由，否则，及时匹配到了Route，但是我们不知道它的渲染位置，也不能实现此功能。

其次再说一下 this.props.match 这个属性，通过这个属性，我们可以获得当前页面，即一级路由匹配到的组件对应的路径，在这里 this.props.match 的值是 “/set”。

## 6.静态路由，动态路由 ##

1.静态路由

如果您使用过Rails，Express，Ember，Angular等，那您已经使用过了静态路由。 在这些框架中，需要在进行任何渲染之前将路由声明为应用初始化的一部分。 React Router pre-v4也是静态的（大部分情况下）。

注意：在应用监听之前如何声明路由

比如在Angular中，先声明路线，然后在渲染之前将其导入顶级AppModule：

代码块  
// Angular Style routing:  
const appRoutes: Routes = \[  
\{  
path: “crisis-center”,  
component: CrisisListComponent  
\},  
\{  
path: “hero/:id”,  
component: HeroDetailComponent  
\}  
\];  
  
@NgModule(\{  
imports: \[RouterModule.forRoot(appRoutes)\]  
\})  
export class AppModule \{\}  
2.动态路由

当讨论动态路由时，是指在您的应用渲染时发生的路由，而不是在运行中的应用之外配置或约定的。这意味着几乎所有内容都是React Router中的一个组件。

代码块  
const App = () => (

Dashboard

); //该 Route 将呈现

写点你要说的