单击按钮时如何获取另一个组件？

Question

我正在处理反应项目在这有两个组件主页和主页中的联系人我有按钮如果我点击那个按钮我必须去联系人组件。但是在我的导航栏中，我只有主页组件，所以在输出中我也只有主页。所以如果我点击按钮，我需要看到联系人组件。

这是 Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';

export default function Navbarcollection() {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <nav className="navbar navbar-expand-lg navbar-light bg-light">
                        <a className="navbar-brand" href="#">Navbar</a>
                        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarNav">
                            <ul className="navbar-nav">
                                <li className="nav-item active">
                                    <Link className='nav-link' to='/'>Home</Link>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    )
}

这是 App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router,Switch,Route } from "react-router-dom";
import Navbar from './Navbar/Navbarcollection';
import Home from './Home/Home';
import Contact from './Contact/Contact';

function App() {

  return (
    <div className="App">
      <Router>
        <Navbar></Navbar>
        <Switch>
          <Route exact path='/'><Home></Home></Route>
          <Route path='/contact'><Contact></Contact></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

这是 Home.js

import React from 'react'

export default function Home() {
    return (
        <div className='container pt-5 text-center'>
            <button className='btn btn-primary'>Click here</button>
        </div>
    )
}

这是 Contact.js

import React from 'react'

export default function Contact() {
    return (
        <div className='pt-5 text-center'>
            <h1>My name is Mark you can call me xxxxxxxxx!</h1>
        </div>
    )
}

Answer 1

您没有在按钮中提供目标路径，这就是它没有将您重定向到任何地方的原因。

尝试将您的 home 组件替换为以下组件。

import React from 'react';
import { Link } from 'react-router-dom';

export default function Home() {
  return (
    <div className='container pt-5 text-center'>
      <Link to='/contact' className='btn btn-primary' >Click here</Link>
    </div>
  ) 
}

希望这会对你有所帮助。

Answer 2

在 Home.js 中的按钮中替换

<button className='btn btn-primary'>Click here</button>

与

<a href='/contact' class='btn btn-primary' role="button">Click here</a>

这是基于您使用引导程序和路由 /contact 路径到您的联系人组件这一事实的最简单的解决方案

Answer 3

看看Conditionnal rendering

<div className="collapse navbar-collapse" id="navbarNav">
    <ul className="navbar-nav">
        <li className="nav-item active">
            { if (this.props.location.pathname !== "/") {
                return <Link className='nav-link' to='/'>Home</Link>
            } else { 
                return <Link className='nav-link' to='/contact'>Contact</Link>
                }
            }
        </li>
    </ul>
</div>

此外，您可能应该使用其他语法来注册您的路线：

<Switch>
   <Route exact path='/' component="{Home}"/>
   <Route path='/contact' component="{Contact}"/>
</Switch>