Question

我正在使用reactjs创建网站。我在index.js中设置了我的所有链接，如下所示

ReactDOM.render(
  (<BrowserRouter history="browserHistory">
    <Switch>
      <Route path="/about-us" component={AboutUs}/>
      <Route path="/contact-us" component={ContactUs}/>
      <Route path="/" component={App}/>
      </Switch>
     </BrowserRouter>)
, document.getElementById('app'));

在另一个组件中，我创建了一个按钮。我在按钮单击上设置onClick事件，将浏览器重定向到特定URL并呈现组件。但是当我浏览器刷新或按F5时，我看到空白页面。有人可以帮助我。

import React, { Component } from 'react';
//import 'typeface-roboto'
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
//import MenuIcon from 'material-ui-icons/Menu';

import AboutUs from './AboutUs';
import s from './../appcss.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

const styles = {
  root: {
    width: '100%',
  },
  flex: {
    flex: 1,
  },
  logo:{
    width:20,
    height:5,
  }
}

//const MyLink = props => <Link to="/about-us"/>

class Header extends Component {

  constructor(props){
    super(props);
    this.loadAboutUs = this.loadAboutUs.bind(this);
    this.loadWhatwedo = this.loadWhatwedo.bind(this);
    this.loadPortfolio=this.loadPortfolio.bind(this);
    this.loadContactUs=this.loadContactUs.bind(this);
  }

  loadAboutUs(e) {
      e.preventDefault();
      this.context.router.history.push('/about-us');
    }

    loadWhatwedo(e){
      e.preventDefault();
      this.context.router.history.push('/what-we-do');
    }

    loadPortfolio(e){
      e.preventDefault();
      this.context.router.history.push('/portfolio');
    }

    loadContactUs(e){
      e.preventDefault();
      this.context.router.history.push('/contact-us');
    }

   render() {
       const { classes } = this.props;

      return (
        <Router>
        <div className={classes.root}>
      <AppBar position="static" color="white">
        <Toolbar>
              <img src={require('./../images/logo.png')} ></img>
          <div>
            <Button color="inherit" href="/about-us" onClick={this.loadAboutUs}>About Us</Button>
            <Button color="inherit" href="/what-we-do">What We Do</Button>
            <Button color="inherit" href="/portfolio">Portfolio</Button>
            <Button color="inherit" href="/contact-us" onClick={this.loadContactUs}>Contact Us</Button>
          </div>
        </Toolbar>
      </AppBar>
    </div>
  </Router>
      );
   }
}
Header.propTypes = {
  classes: PropTypes.object.isRequired,
};

Header.contextTypes = {
  router: PropTypes.object.isRequired
};

export default withStyles(styles)(Header);

Answer 1

您使用的是webpack-dev-server吗？如果是，请尝试使用historyApiFallback选项：

devServer: {
    historyApiFallback: true
    ...
}

或通过CLI

webpack-dev-server --history-api-fallback

希望它有所帮助！

页面在刷新时不呈现

1 个答案: