Question

app.js - 使用app.js我得到左侧菜单列表。使用路由我是从左侧菜单中选择一个值。

我第一次使用this.props.location.pathname获取类似http://localhost:3000/Messages/3的路径Url。当我在菜单中第二次点击时，页面没有刷新而没有获得路径：http://localhost:3000/Messages/4

因为我在左侧菜单和单个路由文件（消息组件）中使用动态json数据。

我每次都需要通过选择菜单中的一个值来刷新页面。

class App extends Component {

      constructor(){
        super();
        this.state = {
          data :[]
        }
      }


      componentDidMount(){
       var data =[{"id": 2 ,"name" :"shiva"},{"id": 3 ,"name" :"krishna"},{"id": 5 ,"name" :"ravi"}];
            this.setState({data: data});
        }
    }
    render() {
        return (
    <div className="container">
     <div className="col-lg-4">
            <div className="container-top">
               <div className="col-lg-4 leftmenu-contact-bg">
               <div className="ex1">
             {this.state.data.map((res,index) => <div className="left-list" key={index}>
            <div className="right-content" >
            <NavLink to={`/Messages/${res.id}`} activeClassName="nav-link-active" >
            <span className="icon-list"><i className="material-icons icon-color">person</i></span><span className="numbers" > {res.name}</span>

            </NavLink>


            </div>
            </div>

            )}


            </div>
               </div>

            </div>
           </div>
          <div className="col-lg-8">
          <Switch>
           <Route exact path ="/Messages/:id"  component={Messages} />
              </Switch>
          </div>
          </div>

    );
      }
    }

Messages.js

import React from "react";


class Messages extends  React.Component{

  constructor(){
    super()
    this.state = {
      data :[]
    }

  }

  componentDidMount(){


alert(this.props.location.pathname);


}


render(){



    return(

      <div>

 <div className="chat-decription">




</div>

</div>);
  }
}

Url path :

http://localhost:3000/Messages/2
http://localhost:3000/Messages/5

Answer 1

import React from 'react';

class Message extends React.Component {
  constructor(props) {
    super(props);
  }

  render () {
    return (
      <span>Message id is {this.props.params.id}</span>
    )
  }
}

export default Message;

对于这条路线，你的班级应该像

Task

react-router

使用react js

1 个答案: