反应链接发送道具

Question

I'm new to react, so please be kind and bear with me :D

Here's my problem:

I have a lsit of projectItem components that are being generated and all are linked to a projectDetail page about that project, something like this:

render() {
    return (
      <Link to="/projectDetail" >
        <div className="projectItem">
          <h1>{this.props.name}</h1>
          <LazyLoad height={400} offsetTop={0} imageProps={{
            src: this.props.thumb,
            alt: this.props.name,
            ref: "image",
          }} />
         </div>
        </Link>
    );
  }

and my Route which is located in app.js is something like this:

<Route path="/projectDetail" component={ProjectDetail} />

Now, I would like to send some properties to projectDetail page as well, so that I could tell which projectItem is clicked, How should I?

Answer 1

You cant do this by passing props, or at least its like the worst practice ever! You want to pass some pk (primary key) or rk or slug to the detail view. Consider making a urls variable like this:

const urls = {
  frontend: {
    project: {
      list: () => '/projects/',
      details: (pk) => `/projects/detail/${pk ? pk : ':pk:'}`,
    }
}

and in your route, do something like this:

<Route path={urls.frontend.details()} exact component={ProjectDetail} />

and when you want to use this rout in a link, do this:

<Link to={urls.frontend.details(<your_pk_here>)} >
  <YourContent>
</Link>

Answer 2

You can do this by simple way here:

    <Link to="projectDetail" params={{ testvalue: "hello" }}>Your link</Link>

or

    <Link to="projectDetail/hello">Your link</Link>

And,

    <Route name="projectDetail" path="/:testvalue" component={ProjectDetail}/>

to get this via this.props.params.value at your CreateIdeaView class.

Answer 3

You can pass projectID or whatever using following code

render() {
  return (
    <Link to={{
      pathname: '/projectDetail',
      state: { projectID: ID }
    }}>
      <div className="projectItem">
        <h1>{this.props.name}</h1>
        <LazyLoad height={400} offsetTop={0} imageProps={{
          src: this.props.thumb,
          alt: this.props.name,
          ref: "image",
        }} />
        </div>
      </Link>
  );
}

You can then use location.state.projectID to access it.

Answer 4

You can use the Link component like below, you may use this as reference https://reacttraining.com/react-router/web/api/Link

render() {
    return (
      <Link to={{pathname: '/projectDetail',state: { //state to persists} }}>
        <div className="projectItem">
          <h1>{this.props.name}</h1>
          <LazyLoad height={400} offsetTop={0} imageProps={{
            src: this.props.thumb,
            alt: this.props.name,
            ref: "image",
          }} />
         </div>
        </Link>
    );
  }