React-router-dom react-router-dom

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();
Copy the code

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 Routing Cases</h2>
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">{/* Navigation route link */}<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>{/* Matches only once */}<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
Copy the code

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 Component content</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>)}Copy the code

import React from 'react'
export default function About() {
  return (
    <div>
      <h2>About Component content</h2>
      <div>The about component</div>
    </div>)}Copy the code

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
Copy the code

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
Copy the code

import React from 'react'
const messageDetails = [
    {id:1.title:'Details 1'.content:'I love your country'},
    {id:2.title:'Details 2'.content:'I love your parents'},
    {id:3.title:'Details 3'.content:'I love your wife.'},]export default function MessageDetail(props) {
    const id = props.match.params.id// Match route parameters
    const md = messageDetails.find(md= >md.id == id)
    console.log(md);
    
    // Get the id value of the secondary route to match
  return (
    <div>
      <ul>
        <li>id:{md.id}</li>
        <li>title:{md.title}</li>
        <li>content:{md.content}</li>
      </ul>
    </div>)}Copy the code