React学习笔记【15】

第十八节

React路由

三大组件

• Router：所有路由组件的跟组件（底层组件），包裹路由规则的最外层容器。

  • basename属性：设置此路由跟路径
  • Router可以在一个组件中写多个
• Route：路由规则的匹配组件，显示当前规则对应的组件

• Link：路由跳转的组件

  • Link可以设置to属性来进行页面的跳转，to属性可以直接写路径的字符串，也可以通过一个对象进行路径的设置。
  • replace属性：点击链接后，将新地址替换成历史访问记录的原地址

根据不同路径显示不同内容
npm install react-router-dom --save

如果要精确匹配，可以在Route上设置exact属性

动态路由实现：
<Route exact path="/news/:id" component={News}></Route>

本节代码

import React from 'react'
//hash模式 带#
// import { HashRouter as Router, Link, Route } from 'react-router-dom'

//history模式/后端匹配使用
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

function Home() {
    return (
        <div>
            <h1>admin首页</h1>
        </div>
    )
}

function Me(props) {
    console.log(props.location);
    return (
        <div>
            <h1>admin我的</h1>
        </div>
    )
}

function Product() {
    return (
        <div>
            <h1>admin产品</h1>
        </div>
    )
}

function News(props){
    console.log(props);
    return(
        <div>
            新闻页，新闻id：{props.match.params.id}
        </div>
    )
}

export default class App extends React.Component {
    render() {
        const meObj = {
            pathname: '/admin/me',//跳转的路径
            search: '?username=admin',//GET请求参数
            hash: "#abc",//设置的Hash值
            state: { msg: 'hello world' }//传入组件的数据
        }
        return (
            <>
                <h2>普通内容-所有页面都显示</h2>
                <Router>
                    <Link to="/">首页</Link>
                    <Link to="/me">Me</Link>
                    <Link to="/product">Product</Link>
                    <Link to="/news/456789">新闻</Link>
                    <Route exact path="/" component={() => { return (<div>首页</div>) }}></Route>
                    <Route exact path="/product" component={() => { return (<div>product</div>) }}></Route>
                    <Route exact path="/news/:id" component={News}></Route>
                    <Route exact path="/me" component={() => { return (<div>me</div>) }}></Route>
                </Router>

                {/* <Router basename="/admin"> */}
                <Router>
                    <div className="nav">
                        <Link to="/admin">admin首页</Link>
                        <Link to="/admin/product" replace>admin产品</Link>
                        {/* React中两个{}代表里面的是对象 */}
                        <Link to={meObj}>admin个人中心</Link>
                    </div>
                    <Route path="/admin" exact component={Home}></Route>
                    <Route path="/admin/product" exact component={Product}></Route>
                    <Route path="/admin/me" exact component={Me}></Route>
                </Router>
            </>
        )
    }
}