(精华2020年5月24日更新) react基础篇 react-router-dom的基本使用

首先安装

 npm i react-router-dom

到index.js中加入如下代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {HashRouter,BrowserRouter} from 'react-router-dom'

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>
, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

使用方式

import React from 'react'
import {NavLink,Link,Route,Redirect,Switch} from 'react-router-dom'
import About from './views/about'
import Home from './views/home'
class App extends React.Component {
  render () {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
              <h2>React 路由案例</h2>
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/*导航路由链接*/}
              <NavLink to="/about" className="list-group-item">About</NavLink>
              <NavLink to="/home" className="list-group-item">Home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Switch>{/*只匹配一次*/}
                  <Route path="/about" component={About}></Route>
                  <Route path="/home" component={Home}></Route>
                  <Redirect to="/home"></Redirect>
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default App

home.js

import React from 'react'
import {NavLink,Link,Route,Redirect,Switch} from 'react-router-dom'
import News from './news'
import Message from './message'
export default function Home() {
  return (
    <div>
      <h2>Home组件内容</h2>
      <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>
          <Route path="/home/message" component={Message}></Route>
          <Redirect to="/home/news"></Redirect>
        </Switch>
      </div>
    </div>
  )
}

about.js

import React from 'react'
export default function About() {
  return (
    <div>
      <h2>About组件内容</h2>
      <div>
        about组件
      </div>
    </div>
  )
}

子路由
new.js

import React from 'react'
class News extends React.Component {
    state = {
        newsArr:['news001','news002','news003']
    }
  render () {
      const {newsArr} = this.state
    return (
        newsArr &&newsArr.map((item,index)=><li key={index}>{item}</li>)
    )
  }
}

export default News

message.js和messageDetaile.js

import React from 'react'
import {NavLink,Link,Route,Redirect,Switch} from 'react-router-dom'
import MessageDetail from './messageDetail'
class Message extends React.Component {
    state = {
        messages:[]
    }
    componentDidMount(){
        setTimeout(()=>{
            const messages = [
                {id:1,title:'m1'},
                {id:2,title:'m2'},
                {id:3,title:'m3'},
            ]
            this.setState({
                messages
            })
        },1000)
    }
    render () {
        const {messages} = this.state
        const show = messages.length ? 'none' : 'block'
        return (
            <div>
                <p style={{display:show}}>loading.......</p>
                <ul>
                    {
                        messages && messages.map((item,index)=>{
                            return (
                                <li key={index}>
                                    <Link to={`/home/message/${item.id}`}>{item.title}</Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <Route path="/home/message/:id" component={MessageDetail}></Route>
            </div>
        )
    }
}

export default Message

import React from 'react'
const messageDetails = [
    {id:1,title:'详细信息1',content:'我爱你祖国'},
    {id:2,title:'详细信息2',content:'我爱你父母'},
    {id:3,title:'详细信息3',content:'我爱你老婆'},
]
export default function MessageDetail(props) {
    const id = props.match.params.id//匹配路由参数
    const md = messageDetails.find(md=>md.id == id)
    console.log(md);
    
    // 拿到二级路由穿过来的id值 进行匹配
  return (
    <div>
      <ul>
        <li>id:{md.id}</li>
        <li>title:{md.title}</li>
        <li>content:{md.content}</li>
      </ul>
    </div>
  )
}