技術標籤：# Reactreactrouter

目錄

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>
  )
}