为什么我的导航栏不能在React中渲染?

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

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;

main.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;

index.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();
dangdangheta 回答:为什么我的导航栏不能在React中渲染?

您需要使用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

本文链接:https://www.f2er.com/3085834.html

大家都在问