简单的 React Router 例子_react-router写法示例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51664705/article/details/115263982

本文通过一个简单的例子介绍React Router的使用。在`AppRouter`中，`Link`作为导航标签，`to`属性用于指定目标路径。`Route`根据浏览器URL加载相应的组件。在`List`组件中，利用`this.props.match.params.id`动态获取URL参数，并能实时响应URL变化。同时，我们看到了`Index.js`和`Home.js`等关键文件的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

文件目录

在这里插入图片描述

index.js(主)

固定格式

import React from 'react'
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'

ReactDOM.render(<AppRouter />,document.getElementById('root'))

AppRouter

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

//下列都是一些无状态组件。
import Index from './Pages/Index'
import List from './Pages/List'
import Home from './Pages/Home'

//设置规则  传递值  接收值  显示内容
function AppRouter(){

    return(
        <Router>
            <ul>
                <li><Link to="/home/">首页</Link></li>{/*Link相当于a标签*/}
                <li><Link to="/list/123">列表</Link></li>
            </ul>
            <Route path="/" exact component={Index} />{/*react表示精确匹配，只匹配"/"*/}
            <Route path="/list/:id" component={List} />
            <Route path="/home/" component={Home} />
        </Router>
    )

}

export default AppRouter

Link相当于一个a标签，to需要赋值传递过去的值。
Route就是一个路由。当浏览器变成path里面的路径，Route就变为component里面的组件。

List

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = { }
    }
    render() { 
        return ( <h2>List-page->{this.state.id}</h2>);
    }
    componentDidMount(){
        console.log(this.props)
        let tempId = this.props.match.params.id
        this.setState({id:tempId})
    }
}
 
export default List;

List为动态组件。
this.props.match.params.id找到就是这个id。
this.props.match.params.id会随着页面的地址改变而改变。
在这里插入图片描述

Index.js

import React, { Component } from 'react';
import {Link,Redirect} from "react-router-dom"

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list:[
                {cid:123,title:'技术胖的个人博客-1'},
                {cid:456,title:'技术胖的个人博客-2'},
                {cid:789,title:'技术胖的个人博客-3'}
            ]
        }
       // this.props.history.push("/home/") //编程式重定向
    }
    render() { 
        return (
            <div>
                {/* <Redirect to="/Home/" />  链接重定向到home组件 */}
                <h2>jspang</h2>
                <ul>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <li key={index}>
                                <Link to = {'./list/'+item.cid}>
                                    {item.title}
                                </Link>
                            </li>
                        )
                    })
                }
                </ul>
            </div>
            
        );
    }
}
 
export default Index;

Home.js

import React, { Component } from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (<h2>这里是HOME组件-Redirect</h2>);
    }
}
 
export default Home;