这是我拥有的代码,我相信我已经正确导入了所有内容,我正在使用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();