17. react-router-dom

1.  路由传参： 

2.  代码：

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 (
    
      
home...........
      {{
        pathname: '/detail',
        hash: '#d',
        search: '?id=001',
        state: {
          id: '001'
        }
      }}>
        跳转到详情页
      
    
  )
}

function Login (props) {
  return 
Login...........
}

function Detail (props) {
  console.log(props, "sss")
  return 
Detail...........
}

function NoMatch (props) {
  return 
NoMatch...........
}

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

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

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

class App extends React.Component {
  render() {
    return (
      

        
          
      
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
)