前端学习（2313）：react之路由基础之路由导航

app.js

import React from 'react';

import  Home from './components/Home.js'
import World from './components/World.js';
import Phone from "./components/Phone.js";
import{Route} from 'react-router-dom'
import './App.css';
function App() {
  return (
    <div className="App">
      你好
        <Route path="/home" component={Home}></Route>
        <Route path="/world" component={World}></Route>
        <Route path="/phone" component={Phone}></Route>

    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter} from "react-router-dom"
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>,

  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();

Home.js

import React, {Component} from 'react';
import{Route,NavLink} from 'react-router-dom'
import Homea from './home/homea.js'
import Homeb from './home/homeb.js'
class Home extends Component {
    render() {
        return (
            <div>
                <NavLink to="/home/homea">homea</NavLink>
                <NavLink to="/home/homeb">homeb</NavLink>
                <Route path="./home/homea" component={Homea}/>
                <Route path="./home/homeb" component={Homeb}/>
            </div>
        );
    }
}

export default Home;

Phone.js

import React, {Component} from 'react';

class Phone extends Component {
    render() {
        return (
            <div>
                phone
            </div>
        );
    }
}

export default Phone;

World.js

import React, {Component} from 'react';

class World extends Component {
    render() {
        return (
            <div>
                world
            </div>
        );
    }
}

export default World;

homea.js

import React, {Component} from 'react';

class Homea extends Component {
    render() {
        return (
            <div>
                homea


            </div>
        );
    }
}

export default Homea;

 homeb.js

import React, {Component} from 'react';

class Homeb extends Component {
    render() {
        return (
            <div>
                homeb
            </div>
        );
    }
}

export default Homeb;

运行结果