一个最简单的react-router设置

来源：互联网发布：最新网络用语编辑：程序博客网时间：2024/06/13 01:01

index,jsx(入口文件)

import '../common/lib';import App from '../component/App';import ReactDOM from 'react-dom';import React from 'react';import { Link } from 'react-router';import { Router, Route, Redirect, IndexRoute } from 'react-router';import { hashHistory } from 'react-router'import Menu from '../component/Menu';import Text1 from '../component/Text1';import Text2 from '../component/Text2';ReactDOM.render((<Router history={hashHistory}><Route path="/" component={App}><IndexRoute component={Text1}/><Route path="menu" component={Menu}/><Route path="text1" component={Text1}/><Route path="text2" component={Text2}/></Route> </Router>), document.getElementById('react-content'));

App.jsx

import React from 'react';import { Link } from 'react-router';import './App.less';import Menu from '../component/Menu';class App extends React.Component {constructor(props) {super(props);}render() {return (<div><nav><h3>总菜单</h3><Menu/></nav>{this.props.children}</div>)}}export default App;

Menu.jsx

import React from 'react';import { Link } from 'react-router';import Text1 from '../component/Text1';import Text2 from '../component/Text1';class Menu extends React.Component {constructor(props) {super(props);}render() {return (<div><ul><li><Link to="text1">text1</Link></li><li><Link to="text2">text2</Link></li></ul></div>)}} export default Menu;

Text1.jsx

import React from 'react';import { Link } from 'react-router';class Text1 extends React.Component {constructor(props) {super(props);}render() {return (<h3>你好，这里是text1</h3>)}} export default Text1;

Text2.jsx

import React from 'react';import { Link } from 'react-router';class Text2 extends React.Component {constructor(props) {super(props);}render() {return (<h3>你好，这里是text2</h3>)}} export default Text2;

0 0