时间戳

首页 > 解决方案 > 使用 react js 路由动态路径 url

reactjs - 使用 react js 路由动态路径 url

问题描述

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

我第一次 使用 this.props.location.pathname获得像http://localhost:3000/Messages/3这样的路径 URL。当我在菜单中单击第二次时，页面没有刷新并且没有获取路径 ex：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

标签： reactjs

解决方案

<Route exact path ="/Messages/:id"  component={Message} />

对于这条路线，您的课程应该像

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;

反应路由器

推荐阅读