作者:pomngjkldjg_849_788 | 来源:互联网 | 2024-11-02 11:41
在React应用中,实现从首页到不同组件的路由导航是常见的需求。本文介绍了如何通过配置路由来实现这一功能。具体步骤包括:1.在首页设置路由链接,使其能够跳转到不同的目标组件;2.确保目标组件正确配置,特别是在导入时使用默认导出(`default`),以确保路由能够正常工作。此外,文章还提供了详细的代码示例,帮助开发者更好地理解和实现这一功能。
前提:
引入的react-router组件必须是2.*.*的版本,不然其他版本不是这样的写法
1.index首页路由到不同组件界面:
import React,{Component} from ‘react‘;
import ReactDOM from ‘react-dom‘;
import { Router,hashHistory,Route } from ‘react-router‘;
import Apply from ‘./apply‘;
import Examines from ‘./Examine‘;
export class Routes extends Component{
render(){
console.log(‘Routes‘)
return(
"/" compOnent={Apply}/>
"/a" compOnent={Examines}/>
);
}
}
ReactDOM.render(, document.getElementById(‘root‘));
实现的效果:
2.需要路由的组件怎么写?
(1)首先必须有:只有加了 default
export default class Apply extends Component{}
路由页面才能导入相应的组件:
(2)需要路由的组件不能再次注册:
2017.12.07 React路由到不同组件界面