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 (
      <BrowserRouter>
        <div className='App'>
          Yay
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

2、router的属性介绍

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

<Route path='/home' />

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

<Route path='/home' exact=true/>

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

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

<Route path='/home' component={Home} />

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

  render() {
    return(
      <BrowserRouter>
        <div className='app'>

          <Router path='/home' render={({match}) => {
            return (
              <div>
                {match.path.split('/')[1]}
                Home Page!
              </div>
            );
          }}

        </div>
      </BrowserRouter>
    );
  }

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

return (
  <Router>
    <div className='App'>
      <div className='App-header'>
        <div className='App-title'>Idea & Thought Box</div>
        <NavBar />
      </div>
      <Route path='/' component={Home} />

      // we create the path
      <Route path='/create-idea' render={({ match }) =>
      // call render which takes a callback and return our component
      // with any props we'll need.
        <CreateItem submitForm={this.submitIdea.bind(this)}/>
      } />


    </div>
  </Router>
);

4、Link&NavLink

非常简单易上手

直接使用<Link to='/home'>就可以导航到我们需要的页面去了,

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

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

export const NavBar = () => {
  return (
    <div className='navBar'>
      <NavLink exact to='/' activeClassName='selected'>Home</NavLink>
      <NavLink to='/create-idea' activeClassName='selected'>Create Idea</NavLink>
      <NavLink to='/ideas' activeClassName='selected'>All Ideas</NavLink>
    </div>
  );
}

5、动态路由：

<Route path='/ideas/:id'>

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

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

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

<Link to={`/ideas/${id}`}><h1>{title}</h1></Link>

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((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));
registerServiceWorker();

app.js代码如下：

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

const App = () => (
    <div>
      <MainRoute/>
    </div>
)

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 = () => (
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/todos" component={Todos} />
    <Route path="/status" component={StatusComponent} />
  </Switch>
)

export default MainRoute;
完成！