react-router4快速上手与配置示例

ract-router4，相比较react-router2有了重大变化。

目标：掌握

• BrowserRouter
• Route
• Link / NavLink

1、首先安装router-router4

npm install react-router-dom --save

为了url的友好性，官方推荐我们用BrowserRouter，也就是我们传统的url的模式，而不是通过/#/分隔的哈希url

最简单的基础实例如下：

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter } from 'react-router-dom';

class App extends Component {

  render() {
    return (
      
        

          Yay
        
      
    );
  }
}

export default App;

2、router的属性介绍

path：path属性接受一个字符串，当你给他一个有效的URL的时候，他就会渲染相对于的组件。示例：

exact：这个属性接受一个布尔类型的值，来判断渲染的时候是否精确匹配，

exact=true/>

例如我们上面这种方式来渲染路由，如果没有exact属性，那么会匹配到/home一下的任意路由，但是如果有exact属性之后，就只精确的匹配/home路由。

component：接受用来渲染相对应路由的单个组件。示例：

render：提供一个回调，在回调中必须要返回一个JSX元素。示例：

  render() {
    return(
      
        


           {
            return (
              

                {match.path.split('/')[1]}
                Home Page!
              
            );
          }}

        
      
    );
  }

3、在路由render里面，如果我们希望给子组件传递一些参数，我们一样可以用props或者redux来做状态管理，这种方式在router中是被允许的

return (
  
    

      

        
Idea & Thought Box
        
      
      

      // we create the path
      
      // call render which takes a callback and return our component
      // with any props we'll need.
        
      } />


    
  
);

4、Link&NavLink

非常简单易上手

直接使用就可以导航到我们需要的页面去了,

NavLink和Link的区别是多一个属性activeClassName&&activeStyle，就是当路由被激活的时候，就执activeClassName&&activeStyle，可以达到定制点击切换的样式效果。示例如下：

import React from 'react';
import { NavLink } from 'react-router-dom';

export const NavBar = () => {
  return (
    

      Home
      Create Idea
      All Ideas
    
  );
}

5、动态路由：

这种路由方式，可以接受ideas下面任何符合react渲染的子路由，通过id的不同，来动态渲染不同的子路由页面。示例：

 {
  const idea = ideas.find((idea) => idea.id === parseInt(match.params.id));
  if (idea) {
    return ;
  }
  return (
This idea does not exist! 
);
  // note that React Router also has a  component.
  //Read more here: https://reacttraining.com/react-router/web/api/Redirect
}} />

当我们用Link去访问的时候，这样访问就可以了。

{title}

6、实战示例:

用create-react-app初始化一个react项目，删掉多余的文件和目录，形成如下目录文件：

idnex.js代码如下：

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render((
  
    
  
), document.getElementById('root'));
registerServiceWorker();

app.js代码如下：

import React from 'react';
import MainRoute from './routes/MainRoute';

const App = () => (
    

      
    
)

export default App;

MainRoute.js代码如下:

import React from 'react';
import { Switch, Route } from 'react-router-dom'

import Home from '../Home';
import Todos from './TodoRoute';
import StatusComponent from '../StatusComponent';


const MainRoute = () => (
  
    
    
    
  
)

export default MainRoute;

完成！