时间戳

首页 > 解决方案 > 导航栏不显示在反应

javascript - 导航栏不显示在反应

问题描述

import React from 'react';
import { NavLink, withRouter } from 'react-router-dom';
import './style.css';



const NavBar = ({ history }) => {
   return (
     <nav>
        <NavLink className="home-link" to="/">Home</NavLink>
        <NavLink activeClassName="active" to="/about">About</NavLink>
        <NavLink activeClassName="active" to="/search">Search</NavLink>
        <button>Back</button>
    </nav>
 );
}

export default NavBar;

这是应用程序组件：

 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { NavBar, SearchForm } from './components';
 import { Welcome, Search ,About} from './pages'
 import { BrowserRouter as Router, Switch, Route, Link } from 'react- 
router-dom';

const PageNotFound = () => (
   <div> 404</div>
)

// function App() {
  class App extends Component {
     render () {
   return (

     <div id="app">
        <header>
        <NavBar />
        </header>
         <main>
             <Switch>
                <Route  exact path="/" component={Welcome}/>
                <Route path="/about" component={About} />
                <Route path="/search" component={Search} />

            </Switch> 
             <SearchForm/>
        </main>
    </div>
   )
}
}

export default App;

当我 npm 启动我的应用程序时，它没有显示导航栏，我错过了什么？我已经将导航栏组件导入到我的 App.js 文件中，并且我尝试了在线教程但无济于事。

我的组件文件中的 index.js 文件

export { default as NavBar } from './NavBar';
export { default as SearchForm } from './SearchForm';
export { default as Result } from './Result';

标签： javascriptreactjsfrontend

解决方案

请尝试定义布局。它可能看起来如下。

MainLayout = ({children}) => {
   return (
    <div id="app">
        <header>
        <NavBar />
        </header>
         <main>
             {children}
             <SearchForm/>
        </main>
        </div>
   )
}

并且像这样定义路由器

<MainLayout>
    <Switch>...
</MainLayout>

推荐阅读