帶有 React Router 的 React-bootstrap 導航欄

Question

我查看了與該主題相關的各種答案，但問題似乎仍然存在。 如果有一些具體的解決方案，我會很高興。

我正在嘗試使用 react-bootstrap 渲染導航欄並嘗試使用 react-router 對其進行路由。 第一次點擊似乎不起作用。 當頁面被強制加載時，組件被加載。

以下是相關文件。

MyAppNavbar,js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Nav, NavDropdown, Navbar, Container, Alert } from "react-bootstrap";
import { Link } from 'react-router-dom';
import Routes from './Routes';

class MyAppNavbar extends Component {

    render() {
        return (
            <React.Fragment>
                <Navbar collapseOnSelect expand="lg" bg="dark" fixed="top" variant="dark" >
                    <Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav activeKey={window.location.pathname} variant="pills">
                            <Nav.Item href="/">
                                <Nav.Link as={Link} to="/" eventKey="/home" title="Home">
                                    Home
                            </Nav.Link>
                            </Nav.Item>
                            <Nav.Item>
                                <Nav.Link as={Link} to="/about" title="About">
                                    About
                            </Nav.Link>
                            </Nav.Item>
                            <Nav.Item>
                                <Nav.Link as={Link} to="/category" eventKey="category" title="Category">
                                    Category
                            </Nav.Link>
                            </Nav.Item>

                            <NavDropdown title="Products" id="nav-dropdown">
                                <NavDropdown.Item>
                                    Basic Pricing
                            </NavDropdown.Item>

                                <NavDropdown.Item>
                                    Corporate
                            </NavDropdown.Item>
                                <NavDropdown.Divider />

                                <NavDropdown.Item> Enterprise pricing
                            </NavDropdown.Item>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
                <Routes />
            </React.Fragment>
        );
    }
}
export default MyAppNavbar;

路由.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Category from './Category';
import Products from './Products';
import Home from "./Home";
import About from "./About";
import NotFound from './NotFound'

const Routes = () =>
    <Router>
        <Switch>
            <Route exact path='/'>
                <Home />
            </Route>
            <Route path='/about'>
                <About />
            </Route>
            <Route path='/category'>
                <Category />
            </Route>
            <Route path='/products'>
                <Products />
            </Route>
            <Route >
                <NotFound />
            </Route>
        </Switch>
    </Router>

export default Routes;

應用程序.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Routes from './website/Routes';
import MyAppNavbar from "./website/MyAppNavbar";

const App = () => 
    <React.Fragment>
        <MyAppNavbar />
        <Routes/>
    </React.Fragment>
export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>, 
    document.getElementById('root')
);

Answer 1

嘗試這些修復：-

由於您在MyAppNavBar.js使用NavLink ，因此它需要來自react-router-dom BrowserRouter才能正常工作。

然后你可以這樣做：-

• 修復 1 - 使用BrowserRouter或將App.js所有內容包裝BrowserRouter ，
• 修復2 -你可以僅僅刪除BrowserRouter在Routes.js

無論如何你只需要一個BrowserRouter

修復 1

• 刪除BrowserRouter來自index.js ＆ Routes.js

• 使用BrowserRouter在App.js添加和包裝所有內容

• 'index.js'：-

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<App/>, document.getElementById('root')
);

• Routes.js :-

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Category from './Category';
import Products from './Products';
import Home from "./Home";
import About from "./About";
import NotFound from './NotFound'

const Routes = () =>
    <Switch>
      <Route exact path='/'>
        <Home />
      </Route>
      <Route path='/about'>
        <About />
      </Route>
      <Route path='/category'>
        <Category />
      </Route>
      <Route path='/products'>
        <Products />
      </Route>
      <Route >
        <NotFound />
      </Route>
    </Switch>

export default Routes;

• App.js :-

import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import Routes from './website/Routes';
import MyAppNavbar from "./website/MyAppNavbar";

const App = () => 
    <Router>
        <MyAppNavbar />
        <Routes/>
    </Router>
export default App;

修復 2

刪除BrowserRouter從Routes.js

• Routes.js :-

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Category from './Category';
import Products from './Products';
import Home from "./Home";
import About from "./About";
import NotFound from './NotFound'

const Routes = () =>
    <Switch>
      <Route exact path='/'>
        <Home />
      </Route>
      <Route path='/about'>
        <About />
      </Route>
      <Route path='/category'>
        <Category />
      </Route>
      <Route path='/products'>
        <Products />
      </Route>
      <Route >
        <NotFound />
      </Route>
    </Switch>

export default Routes;