react-router 4.0的使用方法

前端之家收集整理的这篇文章主要介绍了react-router 4.0的使用方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在react-router 4.0以及之后的版本,使用react-router都只需要引用一个react-router-dom即可。@H_301_2@

使用方法:@H_301_2@

root.js
@H_301_2@

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:@H_301_2@

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:@H_301_2@

import React,{ Component } from 'react';

class Team1 extends Component {
  render() {
    return (
      <h1>Team1</h1>
    )
  }
}

export default Team1;

Team2.js:@H_301_2@

import React,{ Component } from 'react';

class Team2 extends Component {
  render() {
    return (
      <h1>Team2</h1>
    )
  }
}

export default Team2;
原文链接:https://www.f2er.com/react/301763.html

猜你在找的React相关文章