Question

我正在处理react项目，其中有两个组件Home和Contact in Home我有按钮如果单击该按钮，则必须转到Contact组件。但是在我的Navbar中，我只有Home组件，因此在输出中我也只有首页。因此，如果我单击按钮，则需要查看“联系人组件”。

这是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

您没有在按钮中提供目标路径，这就是为什么它不会将您重定向到任何地方。

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

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>

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

3 个答案: