1

我是 React 的新手，正在使用 MDB（Bootstrap 的材料设计）我从这个站点获取了 NavBar，并将链接更改为我自己的路线。该站点的地址正在更改，但是该站点永远不会更改为所需页面。我必须告诉你，我已经使用过几次 React Router 并且从来没有遇到过这样的事情。主要问题和 CRAZY S*** 是我有另一个可以正常工作的链接标签，但只是在 NAVBAR 中存在问题。

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router} from "react-router-dom";
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import App from './App';

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

应用程序.js

import React from 'react';
import { BrowserRouter as Router, Route,Switch} from "react-router-dom";
import { Link } from "react-router-dom";
import Home from './pages/Home';
import Courses from './pages/Courses'
import Navbar from './components/Navbar'
import Signin from './pages/Sign-in'
import Register from './pages/Register'
import ErrorPage from './components/ErrorPage'
import SingleCourse from './pages/SingleCourse'
import './App.css'
import {
  MDBContainer,
} from 'mdbreact';
import Footer from './components/Footer'
function App() {
  return (
      <>
      <Navbar/>

      <MDBContainer>

      <Switch>

        <Route exact path="/" component={Home}/>
        <Route exact path="/courses" component={Courses}/>
        <Route exact path="/courses/:id" component={SingleCourse}/>
        <Route path="/sign-in" component={Signin}/>
        <Route path="/register" component={Register}/>
        <Route component={ErrorPage}/>
      </Switch>
      </MDBContainer>
      <Footer/>
      </>
  );
}

export default App;

导航栏

import React, { Component } from "react";
import { Link,BrowserRouter as Router } from "react-router-dom";
import Home from '../pages/Home'
import {
MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline,
MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem
} from "mdbreact";
class NavbarPage extends Component {
state = {
  isOpen: false
};

toggleCollapse = () => {
  this.setState({ isOpen: !this.state.isOpen });
}
handleClick() {
  ;
}

render() {
  return (
    <Router>
      <MDBNavbar className="Navbar"  dark expand="md" style={{backgroundImage: "linear-gradient(" + "to left, #D53D96  , #7A2A90"+" )"}}>
        <MDBNavbarBrand>
          <strong className="white-text">Navbar</strong>
        </MDBNavbarBrand>
        <MDBNavbarToggler onClick={this.toggleCollapse} />
        <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
          <MDBNavbarNav left>
            <MDBNavItem >
              <MDBNavLink to="/"> ////////HERE iS THE PROBLEM(I Change It Many Times!)
              Home
              </MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBDropdown>
                <MDBDropdownToggle nav caret>
                  <span className="mr-2">Courses</span>
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavItem>

            <MDBNavItem>
            <MDBFormInline waves>
              <div className="md-form my-0">
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              </div>
            </MDBFormInline>
          </MDBNavItem>
          </MDBNavbarNav>
          <MDBNavbarNav right>
          <MDBNavItem>
          <MDBNavLink to="#!">My Courses</MDBNavLink>
        </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="#!">Personal Info</MDBNavLink>
            </MDBNavItem>
          </MDBNavbarNav>
        </MDBCollapse>
      </MDBNavbar>
    </Router>
    );
  }
}

export default NavbarPage;
4

3 回答 3

4

尝试从除 index.js 之外的所有其他标记中删除 BrowserRouter 或 Router（在您的情况下）标记。然后我认为这会很好。

于 2019-12-08T17:33:19.123 回答
1

你不应该<Router>在你的Navbar. 它已经在 Index.js 检查：https ://reacttraining.com/react-router/core/api/Router

并将导航栏和页脚更改为内部，MDBContainer如：

     <>

  <MDBContainer>

  <Navbar/>

  <Switch>
    <Route exact path="/" component={Home}/>
    <Route exact path="/courses" component={Courses}/>
    <Route exact path="/courses/:id" component={SingleCourse}/>
    <Route path="/sign-in" component={Signin}/>
    <Route path="/register" component={Register}/>
    <Route component={ErrorPage}/>
  </Switch>
  <Footer/>
  </MDBContainer>

  </>

因为那些正在使用 MDB 组件。

于 2019-12-08T14:40:32.677 回答
1

您不需要BrowserRouter多次导入，index.js文件一次就足够了整个应用程序。您的路径与文件上的路径"/"无关，删除NavBar 组件上的 ，它应该可以正常工作。"/"App.jsRouter

于 2019-12-08T14:43:51.237 回答