Question

它可以在localhost上完美运行，但是我无法使用路由器部署react网站。仅显示登录页面，而不显示其他页面。也许是由于路由器的原因，这里有几个文件可能出错。我在main.js中找到了路由，并导入了App.js文件，而且index.js文件也可能出错。谢谢！（http://tianyiz8.github.io/personal-website）

App.js

import React from 'react';
import './App.css';
import Particle from './component/particle/particle'
import {Layout, Header,Navigation,Drawer,Content} from 'react-mdl';
import Main from './pages/main'
import Footer from './component/footer/footer'
function App() {
  return (
    <div style={{height: '800px', position: 'relative'}}>
    <Layout fixedHeader>
        <Header className = "header-color" transparent title={<span><span style={{ color: '#ddd', marginBottom: '0'}}></span><strong>Navigation</strong></span>}>
          <Navigation>
            <a href="/landing">Profile</a>
            <a href="/aboutMe">About Me</a>
            <a href="/resume">Resume</a>
            <a href="/project">Project</a>
            <a href="/contact">Contact</a>
          </Navigation>
        </Header>
        <Drawer title="Go to ...">
            <Navigation>
                <a href="/landing">Profile</a>
                <a href="/aboutMe">About Me</a>
                <a href="/resume">Resume</a>
                <a href="/project">Project</a>
                <a href="/contact">Contact</a>
            </Navigation>
        </Drawer>
        <Content>
          <div className="page-content" />
          <Particle />
          <Main />
        </Content>
        <Footer/>
    </Layout>
</div>
  );
}

export default App;

main.js

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Landing from './landingpage/landingpage';
import AboutMe from './aboutme/aboutme';
import Project from './project/project';
import Contact from './contact/contact';
import Resume from './resume/resume';

const Main = () => (
  <BrowserRouter basename={ process.env.PUBLIC_URL + '/' }>
    <div> 
      <Route exact path= '/' component={Landing} />
      <Route path= '/aboutMe' component={AboutMe} />
      <Route path= '/contact' component={Contact} />
      <Route path= '/project' component={Project} />
      <Route path= '/resume' component={Resume} />
      <Route path= '/landing' component={Landing} />
    </div> 
  </BrowserRouter>
)

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 Landing from './pages/landingpage/landingpage';
import { BrowserRouter, Route } from 'react-router-dom';
const routing = () => (
  <BrowserRouter>
    <div> 
      <Route exact path= {process.env.PUBLIC_URL + '/'} component={Landing} />
      <Route path= {process.env.PUBLIC_URL + '/aboutMe'} component={App} />
      <Route path= {process.env.PUBLIC_URL + '/contact'} component={App} />
      <Route path= {process.env.PUBLIC_URL + '/project'} component={App} />
      <Route path= {process.env.PUBLIC_URL + '/resume'} component={App} />
      <Route path= {process.env.PUBLIC_URL + '/landing'} component={App} />
    </div> 
  </BrowserRouter>
)
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'), routing
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

Answer 1

所以我将右边的内容放入App.js中，并进行更改以解决问题。

与路由器部署反应

1 个答案: