react路由

来源：互联网发布：网站源码打包下载编辑：程序博客网时间：2024/05/16 07:05

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属性(像/根路由那样)

阅读全文

0 0