欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React-路由配置

程序员文章站 2022-03-23 11:09:06
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-...

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>
        )
    }
}

React-路由配置

React-路由配置
React-路由配置

可以添加在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>
        )
    }
}

React-路由配置
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>
        )
    }
}

React-路由配置

在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>
        )
    }
}

React-路由配置

本文地址:https://blog.csdn.net/weixin_43760969/article/details/111087141

相关标签: React