javascript - 如何在 React 中单击时重定向到组件

Question

当用户单击这样的按钮时，我试图重定向到另一个组件：

import React from 'react';
import Article from '../Article/Article.js'
import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'


const Posts = ({ posts, loading }) => {
  if (loading) {
    return <div class="loader">
           <div class="spinner"></div>
           </div>
  }


  return (
    <Router>
     <div className="post-container">
         {posts.map(post => (
        <div key={post._id} className='post'>
          <img className="post-container__image" src={post.picture} alt="image"/>
            <div className="post-container__post">
              <div className="post-container__text">
                <h2 className="post-container__title">{post.title}</h2>
                <p className="post-container__date">{post.date}</p>
                <p className="post-info-container__text">{post.postContent.substring(0, 500) + "..."}</p>
                <button className="read-more-btn" onClick={() => () => <Route path="/article" component={Article}/>}>Read more</button>
              </div>
            </div>
        </div>
      ))}
     </div>
     </Router>
  );
};

export default Posts;

但是目前当用户点击按钮时什么都没有发生，我怎样才能实现重定向到所需的组件？

标签： javascriptreactjs

Answer 1

您可以使用props.history.push();或Router.push();功能。