reactjs - React中单击按钮时如何从一个组件重定向到另一个组件？

Question

大家好，我是 ReactJS 的新手。我正在制作电影预订网站的项目。我完成了主页。当在电影卡下单击按钮书时，我必须将用户重定向到具有座位和电影详细信息网格的新页面。对于电影详细信息，我正在使用卡本身。单击书本时，我想显示卡片但是当我单击书本按钮时，什么也没有发生。我已经尝试使用来自 React-Router-DOM 的链接。这是代码：App.js：

import './App.css';
import React,{Component} from 'react';
import Navbar from "./components/Navbar/Navbar";
import Movies from "./components/Movies";
import "bootstrap/dist/css/bootstrap.min.css";
import Cards from './components/Cards';
import { Route } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
class App extends Component {
  render(){
    return (
      <BrowserRouter>
        <switch>
        <Navbar/>
        <Cards/>
          <Route path="/navbar">
            <Navbar/>
          </Route>
          <Route path="/booking" exact>
            <Cards/>
          </Route>
        </switch>
      </BrowserRouter>
    );
  }
}

export default App;

Cards.js：

import React from 'react';
import { Link } from 'react-router-dom';
import './Card.css';
function Cards(){
    return (
      <div class="row row-cols-1 row-cols-md-2 g-4">
      <div class="col">
        <div class="card">
    <div class="card-header">
      <h2>Movie-name</h2>
      </div>
      <img src="https://reactjsexample.com/content/images/2020/01/React-MovieCards-1.jpg" class="card-thumbnail" alt=""/>
    <div class="card-body">
      <p className="text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      
      <div class="d-grid gap-2 col-4 mx-auto">
      <Link to="/booking"><button type="button" >Book</button></Link>
      </div>
      </div>
  </div>
  </div>

  <div class="col">
        <div class="card">
    <div class="card-header">
      <h2>Movie-name</h2>
      </div>
      
      <img src="https://reactjsexample.com/content/images/2020/01/React-MovieCards-1.jpg" class="img-thumbnail" alt=""/>
    <div class="card-body">
      <p className="text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <div class="d-grid gap-2 col-4 mx-auto">
      <Link to="/booking"><button type="button" >Book</button></Link>
      </div>
    </div>
  </div>
  </div>
      </div>
    );
}

export default Cards;

标签： reactjsreact-router-dom