Question

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

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

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

1 个答案: