react-router v5

一、简介

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

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

代码块
npm install react-router-dom

2. 简单体验
   例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 将呈现

写点你要说的