react-router 4.0的使用方法
发布时间:2020-12-15 06:31:19 所属栏目:百科 来源:网络整理
导读:在react-router 4.0以及之后的版本,使用react-router都只需要引用一个react-router-dom即可。 使用方法: root.js import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import Team1 from './compon
在react-router 4.0以及之后的版本,使用react-router都只需要引用一个react-router-dom即可。 使用方法: root.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import Team1 from './components/Team1/team1'; import Team2 from './components/Team2/team2'; import { Route,HashRouter} from 'react-router-dom'; import registerServiceWorker from './registerServiceWorker'; export default class Root extends React.Component { render() { return( <HashRouter> <App> <Route path="/team1" component={Team1}></Route> <Route path="/team2" component={Team2}></Route> </App> </HashRouter> ) } } ReactDOM.render(<Root />,document.getElementById('root')); registerServiceWorker(); App.js: import { Link } from 'react-router-dom'; class App extends Component { render(){ return( <ul> <li><Link to="/Manager">Team 1</Link></li> <li><Link to="/Team1">Team 1</Link></li> <li><Link to="/Team2">Team 1</Link></li> </ul> <div class="content"> {this.props.children} </div> ) } } export default App Team1.js: import React,{ Component } from 'react'; class Team1 extends Component { render() { return ( <h1>Team1</h1> ) } } export default Team1; Team2.js: import React,{ Component } from 'react'; class Team2 extends Component { render() { return ( <h1>Team2</h1> ) } } export default Team2; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |