Я создаю свой первый веб-сайт веб-портфолио в реакции, используя 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>
);
}
}
Вроде здесь все ок. Пожалуйста, поделитесь своими файлами app.js** и **routes.js.
Убедитесь, что ваши теги <Header/> и <Drawer/> находятся между тегами <BrowserRouter></BrowserRouter>.
В вашем файле 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...
большое спасибо, это сработало, я забыл убрать это при отладке глупой ошибки
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...");
}