一、简介

首先，安装create-react-app并创建一个新项目。 代码块 npx create-react-app demo-app cd demo-app 2、安装 react-router-dom 代码块 npm install react-router-dom 简单体验 例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. 路由器

每个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 >

要使用路由器，只需确保将其呈现在元素层次结构的根目录下即可

代码块 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 将呈现

写点你要说的