无法通过 React 应用程序中的导航栏进行路由答案

【问题标题】：Unable to route via Navbar in React application无法通过 React 应用程序中的导航栏进行路由
【发布时间】：2021-05-15 04:23:07
【问题描述】：

我有一个 React 应用程序，我通过导航栏设置了路线。理想情况下，它应该切换，但路由不会切换。我错过了什么吗？

App.js：

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import NavigationBar from './navigation/NavigationBar';
import { Routes } from './navigation/Routes';

export class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <NavigationBar />
                <Routes />
            </BrowserRouter>
        );
    }
}

export default App;

导航/NavigationBar.js：

import React, { Component } from 'react';
import { Nav, Navbar, Form, FormControl, NavDropdown, Button } from 'react-bootstrap';

export default class NavigationBar extends Component {
    render() {
        return (
            <Navbar bg="light" variant="light">
            <Navbar.Brand href="/">KitchenSmart</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Nav.Link href="/">Home</Nav.Link>
                    <Nav.Link href="/shop">Shop</Nav.Link>
                    <NavDropdown title="Sale" id="basic-nav-dropdown">
                        <NavDropdown.Item href="/sale">Winter Sale</NavDropdown.Item>
                        <NavDropdown.Item href="/sale">Summer Sale</NavDropdown.Item>
                        <NavDropdown.Item href="/sale">Spring Sale</NavDropdown.Item>
                    </NavDropdown>
               </Nav>
        </Navbar.Collapse>
        </Navbar>
    )
}
}

导航/Routes.js：

import React from 'react';
import {Route, Switch} from 'react-router';
import Products from '../Products';
import Shop from '../Shop';
import Sale from '../Sale';
import Checkout from '../Checkout';
import Default from '../Default';

const Routes = () => (
    <Switch>
        <Route exact path="/" component={Products} />
        <Route path="/shop" component={Shop}></Route>
        <Route path="/sale" component={Sale}></Route>
        <Route path="/checkout" component={Checkout}></Route>
        <Route component={Default}></Route>
    </Switch>
 );

 export { Routes };

在 URL 上，添加了路由，但组件没有改变。我错过了什么吗？

【问题讨论】：

标签： javascript reactjs typescript react-router

【解决方案1】：

您必须在 NavigationBar 组件中使用 react-router-dom 中的链接标签，即

<Link to="/">Home</Link>
<Link to="/shop">Shop</Link>

【讨论】：

BootStrap 组件方式有什么问题？
没有错。只是，如果你想在页面之间切换，你必须使用 react-router-dom 中的 Link 标签。您可以将它与引导程序一起使用：Home Shop

【解决方案2】：

将 prop exact={true} 添加到所有 Route 组件。即

<Switch>
    <Route exact path="/" component={Products} />
    <Route exact path="/shop" component={Shop}></Route>
    <Route exact path="/sale" component={Sale}></Route>
    <Route exact path="/checkout" component={Checkout}></Route>
    <Route exact component={Default}></Route>
</Switch>

【讨论】：