React Router V4使用指南(精讲)

npm install react-router-dom

 npm install react-router-native

// 正确
ReactDOM.render(
 (
 <BrowserRouter>
  <App />
 </BrowserRouter>),
 document.getElementById('root')
)
//错误，Router 中包含两个子元素
ReactDOM.render(
 (
  <BrowserRouter>
   <App1 />
   <App2 />
  </BrowserRouter>),
 document.getElementById('root')
)

<Route path='/foo' component={Foo} >

<Route path='/foo' render={(props) => {
 <Foo {...props} data={extraProps} />
}}>
</Route>

<Route path='/foo' render={(props) => {
 <div className={props.match "htmlcode">

<Router>
 <Switch>
  <Route exact path='/' component={Home}/>
  <Route exact path='/posts' component={Posts} />
  <Route exact path='/:user' component={User} />
 </Switch>
</Router>



如果不使用 Switch,当 URL 的 pathname 为 "/posts" 时，<Route path='/posts' /> 和 <Route path=':user' /> 都会被匹配，但显然我们并不希望 <Route path=':user' /> 被匹配，实际上也没有用户名为 posts 的用户。如果不使用 exact， "/" "/posts" "/user1"等几乎所有 URL 都会匹配第一个 Route,又因为Switch 的存在，后面的两个 Route永远不会被匹配。使用 exact,保证 只有当 URL 的 pathname 为 '/'时，第一个Route才会匹配。
5）嵌套路由


嵌套路由是指在Route 渲染的组件内部定义新的 Route。例如，在上一个例子中，在 Posts 组件内再定义两个 Route:


const Posts = ({match}) => {
 return (
  <div>
   {/* 这里 match.url 等于 /posts */}
   <Route path={`${match.url}/:id`} component={PostDetail} />
   <Route exact path={match.url} component={PostList} />
  </div>
 )
}



五、链接


Link 是 React Router提供的链接组件，一个 Link 组件定义了当点击该 Link 时，页面应该如何路由。例如：


const Navigation = () => {
 <header>
  <nav>
   <ul>
    <li><Link to='/'>Home</Link></li>
    <li><Link to='/posts'>Posts</Link></li>
   </ul>
  </nav>
 </header>
}  



Link 使用 to 属性声明要导航到的URL地址。to 可以是 string 或 object 类型，当 to 为 object 类型时，可以包含 pathname、search、hash、state 四个属性，例如:


<Link to={{
 pathname: '/posts',
 search: '"htmlcode">

history.push('/posts');
history.replace('/posts');


六、路由设计


路由设计的过程可以分为两步：

  
为每一个页面定义有语义的路由名称(path)
  
组织 Route 结构层次

1）定义路由名称


我们有三个页面，按照页面功能不难定义出如下的路由名称：

  
登录页： /login
  
帖子列表页: /posts
  
帖子详情页: /posts/:id(id代表帖子的ID)

但是这些还不够，还需要考虑打开应用时的默认页面，也就是根路径"/"对应的页面。结合业务场景，帖子列表作为应用的默认页面为合适，因此，帖子列表对应两个路由名称: '/posts'和 '/'
2）组织 Route 结构层次


React Router 4并不需要在一个地方集中声明应用需要的所有 Route, Route实际上也是一个普通的 React 组件，可以在任意地方使用它（前提是，Route必须是 Router 的子节点）。当然，这样的灵活性也一定程度上增加了组织 Route 结构层次的难度。


我们先考虑第一层级的路由。登录页和帖子列表页(首页)应该属于第一层级：


<Router>
 <Switch>
  <Route exact path="/" component={Home}></Route>
  <Route exact path="/login" component={Login}></Route>
  <Route exact path="/posts" component={Home}></Route>
 </Switch>
</Router>



第一个Route 使用了 exact 属性，保证只有当访问根路径时，第一个 Route 才会匹配成功。Home 是首页对应组件，可以通过 "/posts" 和 “/” 两个路径访问首页。注意，这里并没有直接渲染帖子列表组件，真正渲染帖子列表组件的地方在 Home 组件内，通过第二层级的路由处理帖子列表组件和帖子详情组件渲染，components/Home.js 的主要代码如下：


class Home extends Component {
 /**省略其余代码 */
 render() {
  const {match, location } = this.props;
  const { username } = this.state;
  return(
   <div>
    <Header
     username = {username}
     onLogout={this.handleLogout}
     location = {location}
    >
    </Header>
    {/* 帖子列表路由配置 */}
    <Route
     path = {match.url}
     exact
     render={props => <PostList username={username} {...this.props}></PostList>}
    ></Route>
   </div>
  )
 }
}



Home的render内定义了两个 Route,分别用于渲染帖子列表和帖子详情。PostList 是帖子列表组件，Post是帖子详情组件，代码使用Router 的render属性渲染这两个组件，因为它们需要接收额外的 username 属性。另外，无论访问是帖子列表页面还是帖子详情页面，都会共用相同 Header 组件。
七、代码分片


默认情况下，当在项目根路径下执行 npm run build 时 ,create-react-app内部使用 webpack将 src路径下的所有代码打包成一个 JS 文件和一个 Css 文件。
当项目代码量不多时，把所有代码打包到一个文件的做法并不会有什么影响。但是，对于一个大型应用，如果还把所有的代码都打包到一个文件中，显然就不合适了。
create-react-app 支持通过动态 import() 的方式实现代码分片。import()接收一个模块的路径作为参数，然后返回一个 Promise 对象， Promise 对象的值就是待导入的模块对象。例如


// moduleA.js

const moduleA = 'Hello'
export { moduleA };

// App.js

import React, { Component } from 'react';

class App extends Component {
 handleClick = () => {
  // 使用import 动态导入 moduleA.js
  import('./moduleA')
   .then(({moduleA}) => {
    // 使用moduleA
   })
   .catch(err=> {
    //处理错误
   })
 };
 render() {
  return(
   <div>
    <button onClick={this.handleClick}>加载 moduleA</button>
   </div>
  )
 }
}

export default App;




上面代码会将 moduleA.js 和它所有依赖的其他模块单独打包到一个chunk文件中，只有当用户点击加载按钮，才开始加载这个 chunk 文件。


当项目中使用 React Router 是，一般会根据路由信息将项目代码分片，每个路由依赖的代码单独打包成一个chunk文件。我们创建一个函数统一处理这个逻辑：


import React, { Component } from 'react';
// importComponent 是使用 import()的函数
export default function asyncComponent(importComponent) {
 class AsyncComponent extends Component {
  constructor(props) {
   super(props);
   this.state = {
    component: null //动态加载的组件
   }
  }
  componentDidMount() {
   importComponent().then((mod) => {
    this.setState({
     // 同时兼容 ES6 和 CommonJS 的模块
     component: mod.default "htmlcode">

import React, { Component } from 'react';
import { ReactDOM, BrowserRouter as Router, Switch, Route } from 'react-dom';
import asyncComponent from './asyncComponent'
//通过asyncComponent 导入组件，创建代码分片点
const AsyncHome = asyncComponent(() => import("./components/Home"))
const AsyncLogin = asyncComponent(() => import("./components/Login"))

class App extends component {
 render() {
  return(
   <Router>
    <Switch>
     <Route exact path="/" component={AsyncHome}></Route>
     <Route exact path="/login" component={AsyncLogin}></Route>
     <Route exact path="/posts" component={AsyncHome}></Route>
    </Switch>
   </Router>
  )
 }
}

export default App;




这样，只有当路由匹配时，对应的组件才会被导入，实现按需加载的效果。
这里还有一个需要注意的地方，打包后没有单独的CSS文件了。这是因为 CSS样子被打包到各个 chunk 文件中，当 chunk文件被加载执行时，会有动态把 CSS 样式插入页面中。如果希望把 chunk 中的 css打包到一个单独的文件中，就需要修改 webpack 使用的 ExtractTextPlugin 插件的配置，但 create-react-app 并没有直接把 webpack 的配置文件暴露给用户，为了修改相应配置

，需要将 create-react-app 管理的配置文件“弹射”出来，在项目根路径下执行：


npm run eject


项目中会多出两个文件夹：config和 scripts,scrips中包含项目启动、编译和测试的脚本，config 中包含项目使用的配置文件，webpack配置文件 就在这个路径下，打包 webpack.config.prod.js 找到配置 ExtractTextPlugin 的地方，添加 allChunks:true 这项配置：


new ExtractTextPlugin({
 filename: cssFilename,
 allChunks: true
})




然后重新编译项目，各个chunk 文件 使用的 CSS 样式 又会统一打包到 main.css 中。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
            上一篇：一步一步的了解webpack4的splitChunk插件(小结)

            下一篇：关于vue编译版本引入的问题的解决