reactjs - 组件重构为自己的文件时路由不呈现视图

Question

我在我的 App 类中创建了一个 NavBar 组件。当我将 NavBar 组件的内容直接放入应用程序时，一切正常（链接调用路由并呈现不同的页面）。但是，当我将 NavBar 组件导入 App 类时，会显示 NavBar，但单击链接不会更改视图。为什么会发生这种情况，有没有办法解决它？

带有 NavBar 内容的 App.js 直接放置在

import React, {Component} from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Route, Switch, NavLink } from "react-router-dom";
import Nav from 'react-bootstrap/Nav';

import Home from "./components/home/Home";
import ShowProfile from "./components/profile/ShowProfile";
import ChatRoom from "./components/chatroom/ChatRoom";
import CreateProfile from "./components/profile/CreateProfile";
import LoginPage from "./components/auth/LoginPage";
//import NavBar from "./components/navbar/NavBar";

class App extends Component {
  render(){
    return (
      <Router>
          <Nav className="flex-column SideNav">
            <Nav.Item>
              <NavLink activeClassName='activeLogo' className='nav-link logo' to='/home' style={ {padding: '30px 0px 20px 40px'}}>Logo</NavLink>
            </Nav.Item>

            <Nav.Item>
              <NavLink className='nav-link' to='/home'>Home</NavLink>
            </Nav.Item>

            <Nav.Item>
              <NavLink activeClassName='active' className='nav-link' to='/profile'>My Profile</NavLink>
            </Nav.Item>

            <Nav.Item>
              <NavLink className='nav-link' to='/chatroom'>My ChatRoom</NavLink>
            </Nav.Item>
          </Nav>
          <Route path='/login' component={LoginPage}/>
          <Route path='/home' component={Home}/>
          <Route path='/profile' exact component={ShowProfile}/>
          <Route path='/chatroom' component={ChatRoom}/>
          <Route path='/profile/create' component={CreateProfile}/>
      </Router>
    );
  }
}

export default App;

导入了 NavBar 的 App.js

import React, {Component} from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Route, Switch, NavLink } from "react-router-dom";
import Nav from 'react-bootstrap/Nav';

import Home from "./components/home/Home";
import ShowProfile from "./components/profile/ShowProfile";
import ChatRoom from "./components/chatroom/ChatRoom";
import CreateProfile from "./components/profile/CreateProfile";
import LoginPage from "./components/auth/LoginPage";
import NavBar from "./components/navbar/NavBar";

class App extends Component {
  render(){
    return (
      <Router>
          <NavBar/>
          <Route path='/login' component={LoginPage}/>
          <Route path='/home' component={Home}/>
          <Route path='/profile' exact component={ShowProfile}/>
          <Route path='/chatroom' component={ChatRoom}/>
          <Route path='/profile/create' component={CreateProfile}/>
      </Router>
    );
  }
}

export default App;

编辑：导航栏组件

    import React from 'react';
    import 'bootstrap/dist/css/bootstrap.min.css';
    import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
    import './NavBar.css';
    import Nav from 'react-bootstrap/Nav';

    class NavBar extends React.Component {
      render() {
        return (
      <Nav className="flex-column SideNav">
        <Nav.Item>
          <NavLink activeClassName='activeLogo' className='nav-link logo' to='/home' style={ {padding: '30px 0px 20px 40px'}}>Logo</NavLink>
        </Nav.Item>

        <Nav.Item>
          <NavLink className='nav-link' to='/home'>Home</NavLink>
        </Nav.Item>

        <Nav.Item>
          <NavLink activeClassName='active' className='nav-link' to='/profile'>My Profile</NavLink>
        </Nav.Item>

        <Nav.Item>
          <NavLink className='nav-link' to='/chatroom'>My ChatRoom</NavLink>
        </Nav.Item>
      </Nav>
    );
  }
}

export default NavBar;

标签： reactjsreact-router

Answer 1

将 NavBar.js 中的 import 语句从更改import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";为import {NavLink} from "react-router-dom";修复问题。这是因为 BrowserRouter 只适用于 Router、Route 和 Switch。