react路由 - 参数、

1、我们把前面Home组件改动一下，用来展示新闻列表

import React from 'react';
import axios from "axios";

export default  class Home extends React.Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            news:[] // 用来保存新闻数据
        };
      }

    componentWillMount() {
        axios
            .get("http://localhost/news.php")
            .then((response)=>{
                this.setState({
                    news:response.data,
                })
            })
    }

    render(){
        return <div>
            <h2>新闻排行</h2>
            {
                this.state.news.map((item)=>{
                    return <div>
                        <a href="#">{item.title}</a>
                        <p>{item.desc}</p>
                    </div>
                })
            }
        </div>
    }
}

2、接下来我们要实现 点击 新闻标题，跳转到详细页面。

准备新闻详细页组件
detail.js：

import React from 'react';

export default  class About extends React.Component{
    render(){
        return <div>
            <h2>新闻详细页面</h2>
            <p>xxxxx</p>
            <p>xxxxx</p>
            <p>xxxxx</p>
            <p>xxxxx</p>
        </div>
    }
}

3、新闻列表页的跳转连接

我们的Home组件(现在是新闻组件)，还是如下连接：

<a href="#">{item.title}</a>

我们要换成react路由中的Link标签。
所以在home.js里：

#首选要
// 引入路由
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

然后修改成：

<Link to={"/about/"+item.id}>{item.title}</Link>

注意to里的值，最后我们要http://localhost:9000/about/101这样路径。

4、还需要配置路由
router-demo.js里：

<Route  path="/about/:newsid" component={Detail}/>

这个路由就是 加载我们的 新闻详细页组件(detail.js)

是我们想要的效果。

5、在新闻详情页里 获取新闻ID

detail.js：

import React from 'react';

export default  class About extends React.Component{
    render(){
        return <div>
            <h2>新闻详细页面 <span>ID：{this.props.match.params.newsid}</span></h2>
            <p>xxxxx</p>
            <p>xxxxx</p>
            <p>xxxxx</p>
            <p>xxxxx</p>
        </div>
    }
}

我们使用组件的方式开发，可以用this.props.match.params.xxx来获取路由上的参数。

获取到id，我们可以在这个组件里，发送ajax获取服务端的新闻详细数据（这个过程我们省略了）。

6、一个需要交代的知识点。

看我们的router-demo.js代码：

import React from 'react';

// 引入路由
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

//引入组件
import Home from "./home";
import About from "./about"
import Help from  "./help"
import Detail from "./detail"

export default  class RouterDemo extends React.Component{
    render(){
        return <Router>
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/help">Help</Link></li>
                </ul>

                <hr/>

                <Route exact path="/" component={Home}/>
                <Route  path="/about" component={About}/>
                <Route  path="/help" component={Help}/>
                <Route  path="/about/:newsid" component={Detail}/>
            </div>
        </Router>
    }
}

注意Route标签。

看到没有？同时显示了about和detail的页面内容。

这是为什么呢？

                <Route exact path="/" component={Home}/>
                <Route  path="/about" component={About}/>
                <Route  path="/help" component={Help}/>
                <Route  path="/about/:newsid" component={Detail}/>

看路由配置，/about/:newsid其实是包含/about的。
要解决这个问题(不要显示about的页面内容)，只需：

 <Route exact path="/about" component={About}/>

加一个exact属性(像/根路由那样)