连接页面和React-bootstrap Nav

Question

我已经使用react-bootstrap创建了一个NavBar。导航栏本身正在设计中，但我不知道如何连接菜单项和页面。

我已经按照以下格式创建了js中的所有页面，只是为了显示内容。

../ pages / Discover.js

import React from 'react';

export const Discover = () => (
    <div>
        <h2> Discover will come soon</h2>
    </div>
)

NavBar的定义如下：

./ components / NavBar / NavBar.js

import React from 'react';
import { Container } from 'reactstrap';
import { Navbar, Nav} from 'react-bootstrap';
import NavDropdown from 'react-bootstrap/NavDropdown';
import SearchForm from './SearchForm';
import SiteLogo from '../../assets/images/village-logo.svg';

function NavBar(){
    return (
        <Container>
            <Navbar bg="white" expand="lg">
                <Navbar.Brand href="#home">
                    <img
                        src= { SiteLogo }
                        width="214"
                        height="28"
                        className="d-inline-block align-top"
                        alt="Village"
                    />
                </Navbar.Brand>
                <SearchForm />
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                    <Nav.Link href="#discover">Discover</Nav.Link>
                    <Nav.Link href="#create">Create</Nav.Link>
                    <Nav.Link href="#howitworks">How it Works</Nav.Link>
                    <Nav.Link href="#login">Login/Register</Nav.Link>
                    <NavDropdown title="Profile" id="basic-nav-dropdown">
                        <NavDropdown.Item>Firstname LastName</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.1">Profile</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Messages</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.3">Settings</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.4">Logout</NavDropdown.Item>
                    </NavDropdown>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </Container>
    );

}

export default NavBar;

我的仓库的结构如下图所示。它可以帮助您理解。

我正在尝试将Discover.js从./pages/连接到NavItem Discover，并将任何其他项目连接到其对应的页面。

我尝试添加使用Router，但我不确定这是个好方法。

我的App.js看起来像：

lass App extends Component  {
  render() {
    return (
      <Router>
        <div id="page-wrapper">
        <NavBar />
        <Switch>
            <Route exact path="/" component={Home}> </Route>
            <Route path="/discover" component={Discover}> </Route>
            <Route path="/createclassandhost" component={CreateClassAndHost}> </Route>
            <Route path="/howitworks" component={HowItWorks}> </Route>
            <Route component={NoPages}> </Route>
        </Switch>
        </div>
      </Router>
    );
  }

}

我以为这段代码将使我能够将/重定向到home，但是什么也没显示，就像我什么都没显示。 Home.js的设计类似于上面的Discover.js

[任何想法，如何将我的页面连接到NAvBar，并使路由器正常工作？我尝试了许多教程，每次失败。

这里是我的依赖项：

dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.5.0",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "reactstrap": "^8.4.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.2"

欢迎任何帮助

Answer 1

我的意见：您可以使用<Link to="/path"> abc </Link>您可以看到更多here

我不知道它是否有用：v