react-router

目录

0.react-router脑图

1.编写路由效果

2.项目结构

3.源码效果

index.js

about.jsx

new.jsx

home.jsx

message.jsx

message-detail.jsx

---

0.react-router脑图

等我学完再做

1.编写路由效果

1.编写路由组件

2.在父路由组件中指定

   路由链接<NavLink>或者<Link>

   路由<Route>

   js传参要用特殊单引号``

2.项目结构

3.源码效果

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, HashRouter} from 'react-router-dom'
import App from './components/app'
// BrowserRouter来管理整个APP
ReactDOM.render(
  (
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  ),
  document.getElementById('root')
)

about.jsx

import React,{Component} from 'react'
export default class About extends Component {
	render() {
		return (
		    <div>About组件内容</div>
		)	
	}
}

new.jsx

import React,{Component} from 'react'

export default class News extends Component {
  state = {
    newsArr: ['news001', 'news002', 'news003']
  }

  render () {
    return (
      <div>
        <ul>
          {
            this.state.newsArr.map((news, index) => <li key={index}>{news}</li>)
          }
        </ul>
      </div>
    )
  }
}

home.jsx

import React,{Component} from 'react'
import {Switch, NavLink,Route, Redirect} from 'react-router-dom'
import News from './news'
import Message from './message'
export default class Home extends Component{
	render(){
		return (
		  <div>
		    Home组件内容
		    <div>
			{/*导航路由链接*/}
		      <ul className="nav nav-tabs">
		        <li>
		          <NavLink to='/home/news'>News</NavLink>
		        </li>
		        <li>
		          <NavLink to="/home/message">Message</NavLink>
		        </li>
		      </ul>
			  {/*可切换的路由组件*/}
		      <Switch>
		        <Route path='/home/news' component={News} />
		        <Route path='/home/message' component={Message} />
		        <Redirect to='/home/news'/>
		      </Switch>
		    </div>
		  </div>
		)
	}
}

message.jsx

import React,{Component} from 'react'
import {NavLink,Link, Route} from 'react-router-dom'
import MessageDetail from "./message-detail"

export default class Message extends Component {
  state = {
    messages: []
  }

  componentDidMount () {
    // 模拟发送ajax请求异步获取数据
    setTimeout(() => {
      const data = [
        {id: 1, title: 'Message001'},
        {id: 3, title: 'Message003'},
        {id: 6, title: 'Message006'},
      ]
	  //更新状态
      this.setState({
        messages: data
      })
    }, 1000)
  }

  ShowDetail = (id) => {
    this.props.history.push(`/home/message/messagedetail/${id}`)
  }

  ShowDetail2 = (id) => {
    this.props.history.replace(`/home/message/messagedetail/${id}`)
  }

  back = () => {
    this.props.history.goBack()
  }

  forward = () => {
    this.props.history.goForward()
  }

  reqPage = () =>{
	  //通过js进行页面跳转
	  window.location = 'http://www.baidu.com'
  }
  render () {
    const path = this.props.match.path

    return (
      <div>
        <ul>
          {
            this.state.messages.map((m, index) => {
              return (
                <li key={index}>
				  {/*非路由链接，会发送请求，刷新页面*/}
				  {/*<a href={`/home/message/messagedetail/${m.id}`}>{m.title}</a>*/}
                  {/*路由链接，不会发送请求，不刷新页面*/}
				  <NavLink to={`/home/message/messagedetail/${m.id}`}>{m.title}</NavLink>
                  }&nbsp;&nbsp;
                  <button onClick={() => this.ShowDetail(m.id)}>查看详情(push)</button>&nbsp;
                  <button onClick={() => this.ShowDetail2(m.id)}>查看详情(replace)</button>
                </li>
              )
            })
          }
        </ul>
        <p>
          <button onClick={this.back}>返回</button>&nbsp;
          <button onClick={this.forward}>前进</button>&nbsp;
        </p>
		
		<p>
		  <button onClick={this.reqPage}>页面跳转</button>&nbsp;
		</p>
        <hr/>
		{/*响应流程 a href => Route path；id不是路径 是传递的参数*/}
        <Route path='/home/message/messagedetail/:id' component={MessageDetail} />
		{/*<Route path={`${path}/:id`} component={MessageDetail}></Route>*/}
      </div>
    )
  }
}

message-detail.jsx

import React from 'react'

const messageDetails = [
  {id: 1, title: 'Message001', content: '人力部'},
  {id: 3, title: 'Message003', content: '项目部'},
  {id: 6, title: 'Message006', content: '财务部'},
]

export default function MessageDetail(props) {
  // 得到请求参数中的id
  console.log(props)
  const id = props.match.params.id
  // 得到对应的message
  // 返回第一个结果为true的数组元素。*1是为了保证id的数组类型一致
  const md = messageDetails.find(md => md.id===id*1)

  return (
    <ul>
      <li>ID: {md.id}</li>
      <li>TITLE: {md.title}</li>
      <li>CONTENT: {md.content}</li>
    </ul>
  )
}