react路由基础解读(Router、Link和Route)

import { BrowserRouter as Router } from "react-router-dom";
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                //otherCoding
            </div>
        </Router>
        )
    }
}

import { BrowserRouter as Router, Link} from "react-router-dom";
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                <ul>
                    <li><link to='/'>首页</Link></li>
                    <li><link to='/other'>其他页</Link></li>
                </ul>
            </div>
        </Router>
        )
    }
}

import React,{ Component } from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class Home extends Component{
    render(){
        return (
            <div>this a Home page</div>
        )
    }
}
class Other extends Component{
    render(){
        return (
            <div>this a Other page</div>
        )
    }
}
class Main extends Component{
    render(){
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to="/home">首页</Link></li>
                        <li><Link to="/other">其他页</Link></li>
                    </ul>
                    <Route path="/home" component={Home}/>
                    <Route path="/other" component={Other}/>
                </div>
            </Router>
        )
    }
}
render(<Main />,document.getElementById("root"));

<Link to="/first">页面1</Link>

<Route path="/first(和路由入口匹配)" component={要展示的组件的名}></Route>

<Route path='/'>