Почему мои ссылки на реагирующий маршрутизатор работают в ящике, но не в заголовке

Я создаю свой первый веб-сайт веб-портфолио в реакции, используя mdl и react-router. все работает отлично при локальном размещении, но когда я размещаю его в своей корзине AWS S3, ссылки в панели навигации не работают, но работают в ящике панели навигации

import { Navigation, Layout,Header, Drawer, Content} from 'react-mdl'
class App extends Component {
  render() {
    return (
      <div className = "">
      <Layout>
    <Header className='header-color' title = {<Link style = {{textDecoration: 'none', color: 'whitesmoke', textShadow: '1px 1px grey'}} to = "/">Home</Link>} scroll>
              <Navigation style = {{textShadow: '1px 1px grey'}}>
                   <Link to = "Resume">Resume</Link>
                <Link to = "Aboutme">About Me</Link>
                <Link to = "Projects">Projects</Link>
                <Link to = "Contact">Contact</Link>
              </Navigation>
          </Header>
          <Drawer title = {<Link style = {{textDecoration: 'none', color: 'black'}} to = "/">Home</Link>} >
              <Navigation style = {{color: 'black'}}>
                  <Link to = "Resume">Resume</Link>
                <Link to = "Aboutme">About Me</Link>
                <Link to = "Projects">Projects</Link>
                <Link to = "Contact">Contact</Link>
              </Navigation>
          </Drawer>
              <Main />  
          <Content>
              <div  />
          </Content>
      </Layout>
  </div>
    );
  }
}

findgirvin.com.s3-website.us-east-2.amazonaws.com, если хотите посмотреть
david girvin 08.04.2019 19:26

Вроде здесь все ок. Пожалуйста, поделитесь своими файлами app.js** и **routes.js.

Ginger Bread 08.04.2019 19:36

Убедитесь, что ваши теги <Header/> и <Drawer/> находятся между тегами <BrowserRouter></BrowserRouter>.

Ginger Bread 08.04.2019 19:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
74
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В вашем файле App.css у вас есть стиль цвета заголовка:

.header-color {
background: #4AC29A;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #BDFFF3, #4AC29A);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #BDFFF3, #4AC29A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
z-index: -10
}

Удалить строку z-index...

большое спасибо, это сработало, я забыл убрать это при отладке глупой ошибки

david girvin 08.04.2019 20:09
You can use className for Navigation and give that css For Example !
<Navigation className = "inside-Drawer">
    <Link to = "Resume">Resume</Link>`enter code here`
    <Link to = "Aboutme">About Me</Link>
    <Link to = "Projects">Projects</Link>                
    <Link to = "Contact">Contact</Link>
 </Navigation>


    Css Codes

.inside-Drawer{
    text-align: center;
    background-image: url("your image http addres...");
}

Другие вопросы по теме