Question

我正在使用mdl和react-router在React中构建我的第一个Web投资组合网站。在本地托管时一切正常，但是当我将其托管在AWS S3存储桶中时，navbar中的链接不起作用，但可以在navbar抽屉中起作用

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>
    );
  }
}

Answer 1

在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行...

Answer 2

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...");
}

为什么我的React Router链接在抽屉中起作用但在标题中不起作用

2 个答案: