Question

请帮助我

我一直在创建一个单页面应用程序，一个使用react js的github页面。全部部署完成。例如我的网站： “ https://wicaker.github.io”。在我的网站上，有两个导航链接，分别是home。当渲染https://wicaker.github.io时，然后单击导航链接，所有工作正常。但是问题：

当在搜索框中使用https://wicaker.github.io/about进行渲染时，找不到页面。

我的index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));


serviceWorker.unregister();

app.js

import React, { Component } from 'react';
import NavbarMenu from './layout/Navbar';
import MyComponent from'./pages/Parallax';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import './App.css';
import About from'./pages/About';

class App extends Component {
  render() {
    return (
       <BrowserRouter>
      <div >
        <NavbarMenu />
        <Switch>
          <Route exact path='/' component ={MyComponent}/>
          <Route exact path='/about' component ={About}/>
        </Switch>
      </div>
      </BrowserRouter>
    );
  }
}

export default App;

about.js

import React, { Component } from 'react';
import { Parallax , Col} from 'react-materialize';
import backgroundParallax from '../images/backgroundParallax.jpeg';
import Profile from '../images/profile.jpg'; 
import Skills from './Skills';
import Project from './Project';
import Contact from './Contact';
import MyFooter from './Footer';

class About extends Component{
  render(){
    return(
     <div >
      <div className="section white">
        <div className="row container">
          <Col m={12} className='center'><h2 className="header"><font face="Courier New"><b>Who is Me ?</b></font></h2></Col>
          <Col m={9}>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit aperiam est repudiandae a repellendus illum pariatur cumque quisquam, at ipsum, maxime amet excepturi perferendis distinctio non architecto obcaecati quia quas.</Col>
          <Col m={3} className='right'><img src={Profile} className="circle" alt="i-gede-wicaksana" /></Col>
        </div>
      </div>
      <Parallax imageSrc={backgroundParallax}/>
      <Skills />
      <Project />
      <Contact />
      <MyFooter />
    </div>
    )
  }
}

export default About;

我非常感谢您的回答。谢谢

React Js GitHub页面问题

0 个答案: