javascript - 为什么我的导航栏没有在 React 中呈现？

Question

这是我的代码，我相信我已经正确导入了所有内容，我正在使用 React mdl 设置样式并复制并粘贴导航栏代码。 我还正确安装了 react dom router，显示了各个页面，但导航栏本身不在登录页面上。 谁能帮我？谢谢

App.js

import React, { Component } from "react";
import "./App.css";
import { Layout, Header, Navigation, Drawer, Content } from "react-mdl";
import Earth from "./earth.jpg";
import Main from "./components/main";
import { Link } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div style={{ height: "300px", position: "relative" }}>
        <Layout style={{ background: "src{Earth} center / cover" }}>
          <Header transparent title="Title" style={{ color: "white" }}>
            <Navigation>
              <a href="/aboutme">Link</a>
              <a href="/projects">Link</a>
              <a href="/resume">Link</a>
              <a href="/contact">Link</a>
            </Navigation>
          </Header>
          <Drawer title="Title">
            <Navigation>
              <Link to="/aboutme">About Us</Link>
              <Link to="/projects">Projects</Link>
              <Link to="/resume">Resume</Link>
              <Link to="/contact">Contact</Link>
            </Navigation>
          </Drawer>
          <Content>
            <div className="page-content">
              <Main />
            </div>
          </Content>
        </Layout>
      </div>
    );
  }
}

export default App;

主要.js

import React from 'react';
import { Switch, Route} from 'react-router-dom';
import LandingPage from './landingpage';
import AboutMe from './aboutme';
import Contact from './contact';
import Projects from './projects';
import Resume from './resume';


const Main = () => (
  <Switch>
    <Route exact path="/" component = {LandingPage} />
    <Route path="/aboutme" component = {AboutMe} />
    <Route path="/contact" component = {Contact} />
    <Route path="/projects" component = {Projects} />
    <Route path="/resume" component = {Resume} />
  </Switch>
)

export default Main;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material.js';
import { BrowserRouter } from 'react-router-dom';

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

Answer 1

您需要使用来自 react-router-dom 的 BrowserRouter 包装您的 App 组件。

您可以在 App 组件中执行此操作，或者像这样在 index.js 中执行此操作更好:

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, rootElement);

代码框:

https://codesandbox.io/s/so-react-router-uc8dr