развернуть реакцию с маршрутизаторами - PullRequest
Новая
       4

развернуть реакцию с маршрутизаторами

0 голосов
/ 25 марта 2020

Он отлично работает на локальном хосте, но я не могу развернуть свой реагирующий веб-сайт с маршрутизаторами. Отображается только целевая страница, но не остальные. Возможно это из-за роутеров, вот несколько файлов, которые могут go ошибаться. Я понял, что маршрутизация в main. js, с приложением импортирует файл App. js, а также файл index. js может go ошибаться. Спасибо! (http://tianyiz8.github.io/personal-website)

Приложение. 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();

1 Ответ

0 голосов
/ 26 марта 2020

Так что я положил прямо в приложение в. js и изменить, чтобы исправить проблему.

...