17. react-router-dom

import React, { Fragment } from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;

import { BrowserRouter, HashRouter, Route, Redirect, Switch,
  Link, NavLink
} from ‘react-router-dom‘

function Home (props) {
  return (
    <Fragment>
      <h3>home...........</h3>
      <Link to={{
        pathname: ‘/detail‘,
        hash: ‘#d‘,
        search: ‘?id=001‘,
        state: {
          id: ‘001‘
        }
      }}>
        跳转到详情页
      </Link>
    </Fragment>
  )
}

function Login (props) {
  return <h3>Login...........</h3>
}

function Detail (props) {
  console.log(props, "sss")
  return <h3>Detail...........</h3>
}

function NoMatch (props) {
  return <h3>NoMatch...........</h3>
}

class Nav extends React.Component {
  constructor (props) {
    super(props)
  }

  render () {
    return (
        <>
          <NavLink
            to="/login"
            activeStyle={{
              fontWeight: ‘bold‘,
              color: ‘red‘
            }}
          >
            <span>登录</span>
          </NavLink>

          <NavLink
            to="/home"
            activeStyle={{
              fontWeight: ‘bold‘,
              color: ‘red‘
            }}
          >
            <span>home</span>
          </NavLink>
        </>
        
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <Nav />
          <Switch>
            <Route path=‘/‘ exact component={Home}></Route>
            <Route path=‘/home‘ exact component={Home}></Route>
            <Route path=‘/login‘ exact component={Login}></Route>
            <Route path=‘/detail‘ exact component={Detail}></Route>
            <Route path=‘/detail/:id‘ component={Detail}></Route>
            <Route path=‘/404‘ exact component={NoMatch}></Route>
            <Redirect from="/" to="/404"></Redirect>
          </Switch>
        </BrowserRouter>
      </div>
      
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
)