部署与路由器的反应

问题描述 投票:0回答:1

它在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();
reactjs deployment router
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.