import React from 'react'

import ReactDOM from 'react-dom'

import { BrowserRouter as Router } from 'react-router-dom'

import App from './components/App.jsx'

ReactDOM.render(

<Router><App /></Router>,

document.getElementById('root'))

import React from 'react'

import { NavLink, Switch, Route, Redirect } from 'react-router-dom'

import About from '../views/about.jsx'

import Home from '../views/home.jsx'

import User from '../views/user.jsx'

export default class App extends React.Component {

    state = {

        user: {

            id: 1,

            name: 'zs'

        }

    }

    render() {

        const {user} = this.state

        return (

            <div>

                <h3>tab切换</h3>

                {/* 导航链接 */}

                <NavLink to='/about'>About</NavLink><br/>

                <NavLink to='/home'>Home</NavLink><br/>

                <NavLink to='/user/1'>User</NavLink>

                <h3>组件</h3>

                <Switch>

                    {/* <Route path='/about' component={About} />

                    <Route path='/home' component={Home} /> */}

                    <Route path='/about'><About /></Route>

                    <Route path='/home'><Home /></Route>

                    <Route path='/user/:id'><User user={user}/></Route>

                    <Redirect strict from='' to='/about' />

                </Switch>

            </div>

        )

    }

}

import React from 'react'

export default class User extends React.Component {

    render() {

        return (

            <div>

                user组件

                {this.props.user.id + "--" + this.props.user.name}

            </div>

        )

    }

}

import React from 'react'

export default class About extends React.Component {

    render() {

        return (

            <div>

                about组件

            </div>

        )

    }

}

<Route path='/user/:id' component={User}></Route>

const {id} = this.props.match.params

console.log(this.props)

console.log(`id=${id}`)

<Route path='/user/:id'><User user={user}/></Route>

import React from 'react'

import { useRouteMatch, useParams } from 'react-router-dom'

export default function User(props) {

    let match = useRouteMatch()

    console.log(match)

    let { id } = useParams()

    console.log(`path parameter id = ${id}`)

    return (

        <div>

            user组件

            {props.user.id + "--" + props.user.name}

        </div>

    )

}

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)

2. You might be breaking the Rules of Hooks

3. You might have more than one copy of React in the same app

See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

<Route path='/user/:id' component={User}></Route>

import React from 'react'

import { NavLink, Switch, Route, Redirect } from 'react-router-dom'

import { useHistory } from "react-router-dom";

import About from '../views/about.jsx'

import Home from '../views/home.jsx'

import User from '../views/user.jsx'

export default function App() {

    let history = useHistory();

    return (

        <div>

            <h3>tab切换</h3>

            {/* 导航链接 */}

            <NavLink to='/about'>About</NavLink><br />

            <NavLink to='/home'>Home</NavLink><br />

            <NavLink to='/user/1'>User</NavLink>

            <h3>组件</h3>

            <Switch>

                <Route path='/about'><About history={history} /></Route>

                <Route path='/home'><Home history={history} /></Route>

                <Route path='/user/:id'><User history={history} /></Route>

                <Redirect strict from='' to='/about' />

            </Switch>

        </div>

    )

}

import React from 'react'

import { NavLink, Switch, Route, Redirect } from 'react-router-dom'

import UserAdd from './UserAdd.jsx'

import UserList from './UserList.jsx'

import UserEdit from './UserEdit.jsx'

export default class User extends React.Component {

    render() {

        return (

            <div>

                user组件<br />

                {console.log(this.props)}

                {/* 导航链接 */} F

                <NavLink to='/user/list'>UserList</NavLink> <button onClick={this.listClickHandler}>to list</button><br />

                <NavLink to='/user/add'>UserAdd</NavLink> <button onClick={this.addClickHandler}>to add</button><br />

                <NavLink to='/user/edit/110'>UserEdit</NavLink> <button onClick={this.editClickHandler}>to edit</button>

                <h3>组件</h3>

                <Switch>

                    <Route path='/user/list'><UserList /></Route>

                    <Route path='/user/add'><UserAdd /></Route>

                    <Route path='/user/edit/:id'><UserEdit /></Route>

                    {/* <Route path='/user/list' component={UserList}></Route>

                    <Route path='/user/add' component={UserAdd}></Route>

                    <Route path='/user/edit/:id' component={UserEdit}></Route> */}

                    {/* <Redirect strict from='' to='/about' /> */}

                </Switch>

            </div>

        )

    }

    listClickHandler = () => {

        this.props.history.push('/user/list')

    }

    addClickHandler = () => {

        this.props.history.push('/user/add')

    }

    editClickHandler = () => {

        this.props.history.push('/user/edit/110')

    }

}