react路由的使用方法以及通过路由如何传参传递私有属性--【基于最新版本的react-router-dom(4.2.2)】

【一】: 如何使用react-router-dom

前提需要：npm install react-router-dom --save-dev (先下载安装react-router-dom);

react 路由分两种

1：BrowserRouter (使用这个需要服务器相关配置)

2：HashRouter（使用这个不需要服务器配置）

具体使用例子( 1 )：

import React from 'react';

import from 'react-dom';

import {

BrowserRouter as Router,

Route,

Switch

} from 'react-router-dom';

import First from './fistpage'; (引入创建好的页面一)

import Second from './secondpage';(引入创建好的页面二)

ReactDOM .render(

<Router>

    <Switch>

        <Route exact path='/' component={ First } ></Route>

        <Route path='/second' component={ Second } ></Route>

    </Switch>

</Router>

, document.getElementById('app'));

具体使用例子（2）：

import React from 'react';

import from 'react-dom';

import {

HashRouter as Router,

Route,

Switch

} from 'react-router-dom';

import First from './fistpage'; (引入创建好的页面一)

import Second from './secondpage';(引入创建好的页面二)

ReactDOM .render(

<Router>

    <Switch>

        <Route exact path='/' component={ First } ></Route>

        <Route path='/second' component={ Second } ></Route>

    </Switch>

</Router>

, document.getElementById('app'));

【二】: 如何通过路由传参

方法有二！

1：query

2：state

3：'/pathname/:id'

例：

link页面

1: <Link to={{ pathname: '/first', query: { username: 'lle'}}}>go to first</Link>

或者

2: <Link to={{ pathname: '/first', state: { username: 'lle'}}}>go to first</Link>

或者

3: <Link to='/first/:usrname'>go to first</Link>

跳转目标页面first

1: <div>username :  { this.props.location.query.username } </div>

或者

2: <div>username :  { this.props.location.state.username } </div>

或者

3: <div>username: { this.props.match.params.username }</div>

路由设置页面

<Router>

    <Switch>

        <Route exact path='/' component={ First } ></Route>

        <Route path='/second' component={ Second } ></Route>

    </Switch>

</Router>

【三】: 如何通过路由传递属性

例：

<Router>

    <Switch>

        <Route exact path='/' render={ () =><First data='somedata'></First> } ></Route>

        <Route path='/second' render={ () => <Second data='somedata'></Second>} ></Route>

    </Switch>

</Router>