react 配置路由react-router-dom

本文详细介绍了如何使用create-react-app脚手架工具和react-router-dom库在React应用中设置基本的路由功能,通过具体示例展示了如何配置多页面导航,并实现页面间的跳转。

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

window使用 create-react-app 脚手架工具搭建 React 开发环境:https://blog.youkuaiyun.com/buyaopingbixiazai/article/details/83104853

模拟环境:在app.js配置路由,点击menu1跳转到menu1,点击menu2跳转到menu2

1.首先npm安装react-router-dom

安装步骤:

1)打开cmd.

2)  进入到利用脚手架工具下载的文件夹(脚手架工具快速创建项目

3)使用命令:  npm install react-router-dom

4)启动项目,命令:npm start

2.在app.js里面配置。

1)导入需要的文件

2)加上可以改变url的代码,比如<div><Link  to="/Menu_1">Menu_1</Link></div> 或者直接用a标签

3)加上路由

app.js全部代码如下:

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
import Menu_1 from './Menu_1.js';
import Menu_2 from './Menu_2.js';



 class App extends React.Component{
    render(){
      return (

        <Router >
        <div>
          <div><Link  to="/Menu_1">Menu_1</Link></div>
          <div><Link  to="/Menu_2">Menu_2</Link></div>
          <div>
              <Route path="/Menu_1"  component={Menu_1} />
              <Route path="/Menu_2" component={Menu_2} />
              
          </div>
        </div>
      </Router>

      )
    }
}

export default App 

要跳转到的页面menu1.js和menu2.js

menu1.js:

/**
 * 菜单的组件
 */
import React, { Component } from 'react';


class Menu_1 extends React.Component {


    render() {
        return (
            <div >
                <div>我是menu1</div>
               
            </div>
        );
    }
}

export default Menu_1;

menu2.js:

import React, { Component } from 'react';

class Menu2 extends React.Component {
	
	/**
	 * 初始化
	 * @param {*} props 
	 */
	constructor(props){
		super(props);
		this.state = {
			inputValue : ''
		}
		
	}
	
	/**
	 * 弹框
	 */
	handleBtnClick(){
		if(this.state.inputValue == ''){
			alert("输入为空")
		}else{
			alert(this.state.inputValue)
		}

	}
	
	/**
	 * input值
	 * @param {*} e 
	 */
	handleInputChange(e){
		this.setState({
			inputValue: e.target.value
		})
	}

	
	
  render() {
    return (
      <div >  
          <div>我是menu2</div>
      	<div>
	        <input  value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
	        <button   onClick={this.handleBtnClick.bind(this)}>弹出test1消息</button>
        </div>
        <div>
	        <input  value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
	        <button   onClick={this.handleBtnClick.bind(this)}>弹出test2消息</button>
        </div>
        <div>
	        <input  value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
	        <button   onClick={this.handleBtnClick.bind(this)}>弹出test3消息</button>
        </div>
        
      </div>
    );
  }
}

export default Menu2;

程序入口index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

测试:主页出现两个链接,点击链接分别打开不同的页面

主页:

点击menu1:

点击menu2:

把这三个文件全部拿下来就可以运行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

buyaopingbixiazai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值