Question

我创建了一个页面并显示了一些卡片以及卡片的一些小细节现在我想单击任何卡，导航至显示所有详细信息我如何在react js上转到此页面？这是Redux的需要吗？

Answer 1

我无法完全理解您所说的内容，但是您可以使用React-Router导航到Reactjs中的不同页面。要使用npm安装它，请转到您的应用程序目录，然后在命令行中输入 npm install --save React-Router

这是导航到不同页面的简单代码：

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";


const Home=()=>
 (<div>
  <h2>Home</h2>
 </div>
);

const About=()=>
(<div>
  <h2>About</h2>
   </div>
 );


class App extends React.Component {
 render() {
    return (
  <Router>
    <div>

        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>




      <Route exact path="/" component={Home}/>
      <Route exact path="/about" component={About}/>
    </div>
  </Router>
      );
    }
  }
export default App;

我希望它能帮助...

Answer 2

您的问题无需 Redux 。

您只需使用反应路由器。您只需创建两个组件1. Cards.js ，2。 CardDetails.js ，然后在Card.js中导航到卡片点击事件中的卡片详细信息

Cards.js

import React from "react";
import { withRouter } from "react-router";


class Cards extends React.Component {

goToCarddetails = (cardId) => {
    localStorage.setItem("selectedCard", cardId);
    this.props.history.push('/card-details');
// you can manage here to pass the clicked card id to the card details page if needed
}

render() {
    return ( <div>
        <div onClick = {()=>this.goToCarddetails('cardId1')}> card 1 </div>
        <div onClick = {()=>this.goToCarddetails('cardId2')}> card 2 </div>
        <div onClick = {()=>this.goToCarddetails('cardId3')}> card 3 </div>
       </div>
    )
  }
}

export default withRouter(Cards);

在上面点击任意卡，您将导航到卡详细信息页面。

CardDetails.js

import React from "react";


class CardDetails extends React.Component {

render() {
    let selectedCardId = localStorage.getItem("selectedCard");
    // you can get this cardId anywhere in the component as per your requirement 
    return ( <div>
        card details here
       </div>
    )
  }
}

export default CardDetails;

注意： ：我在此处使用的是反应路由器4 。

单击卡片，然后导航到卡页面详细信息以进行反应

2 个答案: