使用react-router-dom

最新推荐文章于 2024-07-04 16:37:43 发布

菜鸟小佳

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量181

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42429288/article/details/93514905

本文介绍了react-router-dom的使用方法，包括使用HashRouter和BrowserRouter+Link两种方式。详细说明了创建项目、安装依赖、新建文件等步骤，通过示例展示了页面跳转的实现，如点击去detail跳转到detail页面，点击回home跳转到主页面。

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

一、如何使用react-router-dom -----HashRouter

新建一个名为my-app的项目

npx create-react-app my-app
cd my-app
npm start

删除src文件夹下的所有文件

安装react-router-dom

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

在src下新建文件detail.js

import React from 'react';
export default class Detail extends React.Component{
    constructor(props){
        super(props);
    }
    
    render(){
        return(
            <div>
                <a href='#/' >回Home</a>
            </div>
        )
    }
}

同样，新建home.js

import React from 'react';
import captainAmerica from './image/captainAmerica.jpg'
export default class Home extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div>
                <img src={captainAmerica} />
                <a href='#/detail'>去detail</a>
            </div>
        )
    }
}

然后新建路由文件router.js

import React from 'react';
import {HashRouter,Route,Switch} from 'react-router-dom';
import Detail from './detail'
import Home from './home'
export default class BasicRoute extends React.Component{
    render(){
        return(
            <HashRouter>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route exact path="/detail" component={Detail}/>
                </Switch>
            </HashRouter>
        )
    }
}

同样在src文件夹下新建入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router'
ReactDOM.render(
  <Router/>,
  document.getElementById('root')
);

然后运行

点击页面中的去detail，就会跳转到detail页面

点击回home，就跳转到主页面

二、使用react-router-dom ----BrowserRouter+Link

最终效果

文件结构如下---圈起来的部分就是以上效果gif的代码

首先是about.js

import React from 'react';
export default class About extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div>
                <p>关于</p>
            </div>
        )
    }
}

接下来是 parent.js

import React from 'react';
export default class Parent extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div>
                这是主题
            </div>
        )
    }
}

然后是 topic.js

import React from 'react';
import {Route,Link} from 'react-router-dom';
import Topics from './topics'
export default class Topic extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div>
                <p>主题列表</p>
                <ul>
                    <li>
                        <Link to={`${this.props.match.url}/rendering`}>使用户react渲染</Link>
                    </li>
                    <li>
                        <Link to={`${this.props.match.url}/component`}>组件</Link>
                    </li>
                    <li>
                        <Link to={`${this.props.match.url}/props-v-state`}>
                            属性-v-状态
                        </Link>
                    </li>
                </ul>
                <Route path={`${this.props.match.url}/:topicId`} Component={Topics} />
                <Route exact path={this.props.match.url} render={()=>(<h3>请选择一个主题</h3>)}/>
            </div>
        )
    }
}

然后是topics.js

import React from 'react'
export default class Home extends React.Component{
    render(){
        return (
            <div>
                {this.props.match.params.topicId}
            </div>
        )
    }
}

然后是try.js


// try.js
import React from 'react';
import { BrowserRouter as Router ,Route,Link} from 'react-router-dom';
import Parent from './parent'
import About from './about'
import Topic from './topic'
export default class Try extends React.Component{
    constructor(props){
        super(props);

    }
    render(){
        return(
            <Router>
                <div>
                    <ul>
                        <li>
                            <Link to='/'>首页</Link>
                        </li>
                        <li>
                            <Link to='/about'>关于</Link>
                        </li>
                        <li>
                            <Link to='/topic'>主题</Link>
                        </li>
                    </ul>
                    <Route exact path='/' component = {Parent} />
                    <Route path='/about' component = {About} />
                    <Route path='/topic' component = {Topic} />
                </div>
            </Router>
        )
    }
}

最后是入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './page/try/try'
ReactDOM.render(
  <Router/>,
  document.getElementById('root')
);

菜鸟一枚，如果有错误欢迎指点，谢谢