React-路由

React路由

根据不同的路径显示不同的组件内容，使用react-router-dom库
安装：npm install react-router-dom

下面例子中，通过export暴露App类，返回index.js中使用渲染，下面代码中，需要注意的是，Router的div内容是正常显示的，其中使用的exact为精确匹配

import React from 'react'

import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

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

function Me() {
    return (
        <div>
            <h1>个人中心</h1>
        </div>
    )
}

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

export default class App extends React.Component {
    render () {
        return (
            <div>
                <p>这是普通内容</p>
                <Router>
                    <div>
                        <Link to='/'>Home</Link>
                        <br />
                        <Link to='/product'>Product</Link>
                        <br />
                        <Link to='/me'>个人中心</Link>
                    </div>
                    <Route path="/" exact component={Home}></Route>
                    <Route path="/product" component={Product}></Route>
                    <Route path="/me" component={Me}></Route>
                </Router>
            </div>
        )
    }
}

可以添加在Router中添加bansename属性，意思是给每一个路由添加一个前缀路由

import React from 'react'

import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

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

function Me() {
    return (
        <div>
            <h1>个人中心</h1>
        </div>
    )
}

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

export default class App extends React.Component {
    render () {
        return (
            <div>
                <p>这是普通内容</p>
                <Router basename="admin">
                    <div>
                        <Link to='/'>Home</Link>
                        <br />
                        <Link to='/product'>Product</Link>
                        <br />
                        <Link to='/me'>个人中心</Link>
                    </div>
                    <Route path="/" exact component={Home}></Route>
                    <Route path="/product" component={Product}></Route>
                    <Route path="/me" component={Me}></Route>
                </Router>
            </div>
        )
    }
}

Link标签中的to属性可以传递的不仅仅是字符串，还可以是变量，下面例子，修改个人中心的路由

import React from 'react'

import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

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

function Me(props) {
    console.log(props);
    return (
        <div>
            <h1>个人中心</h1>
        </div>
    )
}

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

export default class App extends React.Component {
    render () {
        const meObj = {
            pathname: 'me',
            search: '?username=admin',
            hash: '#abc',
            state: {
                msg: 'hello'
            }
        }
        return (
            <div>
                <p>这是普通内容</p>
                <Router basename="admin">
                    <div>
                        <Link to='/'>Home</Link>
                        <br />
                        <Link to='/product'>Product</Link>
                        <br />
                        <Link to={meObj}>个人中心</Link>
                    </div>
                    <Route path="/" exact component={Home}></Route>
                    <Route path="/product" component={Product}></Route>
                    <Route path="/me" component={Me}></Route>
                </Router>
            </div>
        )
    }
}

在Link标签中使用replace，作用是替换当前的路由，也就是如果点击返回上一步，返回的是被替换掉的路由的上一个路由

import React from 'react'

import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

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

function Me(props) {
    console.log(props);
    return (
        <div>
            <h1>个人中心</h1>
        </div>
    )
}

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

export default class App extends React.Component {
    render () {
        const meObj = {
            pathname: 'me',
            search: '?username=admin',
            hash: '#abc',
            state: {
                msg: 'hello'
            }
        }
        return (
            <div>
                <p>这是普通内容</p>
                <Router basename="admin">
                    <div>
                        <Link to='/'>Home</Link>
                        <br />
                        <Link to='/product'>Product</Link>
                        <br />
                        <Link replace to={meObj}>个人中心</Link>
                    </div>
                    <Route path="/" exact component={Home}></Route>
                    <Route path="/product" component={Product}></Route>
                    <Route path="/me" component={Me}></Route>
                </Router>
            </div>
        )
    }
}

动态路由，通过props.match.params.xxx获取参数

import React from 'react'

import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

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

function Me(props) {
    console.log(props);
    return (
        <div>
            <h1>个人中心</h1>
        </div>
    )
}

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

function News(props) {
    console.log(props);
    return (
        <div>
            <h1>新闻中心,url中的id={props.match.params.id}</h1>
        </div>
    )
}

export default class App extends React.Component {
    render () {
        const meObj = {
            pathname: 'me',
            search: '?username=admin',
            hash: '#abc',
            state: {
                msg: 'hello'
            }
        }
        return (
            <div>
                <p>这是普通内容</p>
                <Router basename="admin">
                    <div>
                        <Link to='/'>Home</Link>
                        <br />
                        <Link to='/product'>Product</Link>
                        <br />
                        <Link replace to={meObj}>个人中心</Link>
                        <br />
                        <Link to="/news123">新闻</Link>
                    </div>
                    <Route path="/" exact component={Home}></Route>
                    <Route path="/product" component={Product}></Route>
                    <Route path="/me" component={Me}></Route>
                    <Route path="/news:id" component={News}></Route>
                </Router>
            </div>
        )
    }
}