Question

我遇到了React Router路由问题。当我单击组件时，它会将我带到正确的Route并呈现正确的组件。但是，每当我刷新页面时，它都会中断并且页面上没有任何内容显示。

以下是我的main.js：

＆＃13;

import React, { Component } from 'react';
import { withRouter, BrowserRouter, Switch, Route, HashHistory } from 'react-router-dom';
import ServicePage from './ServicePage';
import ProductPage from './ProductPage';
import MechanicalProductPage from './MechanicalProductPage';
import Body from './Body';


class Main extends Component {
  render() {
    return (
      <main>
        <BrowserRouter history={HashHistory}>
          <Switch>
            <Route exact path="/" component={Body} />
            <Route exact path='/services' component={ServicePage} />
            <Route exact path='/products' component={ProductPage} />
            <Route exact path='/products/mechanical-products' exact component={MechanicalProductPage} />
          </Switch>
        </BrowserRouter>
      </main>
    )
  }
}

export default Main;

＆＃13;

我遇到了问题：

<Route exact path='/products/mechanical-products' exact component={MechanicalProductPage} />

这是我的ProductPage.js：

＆＃13;

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';
require('../../scss/style.scss');

export default class ProductPage extends Component {

  render() {
    return (
      <div className="product-page">
        <h1>Products</h1>
        <div className="section-header-line"></div>

        <div className="all-products-container">
          <div className="row-fluid span12">
            <div className="span4" style={{marginLeft: '180px'}}>
              <Link to="/products/mechanical-products" className="card-link">
                <Card className="service-card">
                  <CardMedia
                    className="service-card-image"
                    image="https://static.wixstatic.com/media/c19c76_22d8ec47d1484b09a9c333e4141a12a0.jpg/v1/fill/w_600,h_454,al_c,q_80,usm_0.66_1.00_0.01/c19c76_22d8ec47d1484b09a9c333e4141a12a0.webp"
                    title="Contemplative Reptile"
                    style={{height: '200'}}
                  />
                  <CardContent>
                    <Typography type="headline" component="h2">
                      Mechanical
                    </Typography>
                  </CardContent>
                </Card>
              </Link>
            </div>
          </div>

        </div>
      </div>
    )
  }
}

＆＃13;

如你所见，＆＃34; card＆＃34;组件已被＆＃34; Link＆＃34;包裹它带你去＆＃34; / products / mechanical-products＆＃34;。

以下是我的MechanicalProductPage.js

＆＃13;

import React, { Component } from 'react';
// require('../../scss/servicePage.scss');
require('../../scss/style.scss');


class MechanicalProductPage extends Component {

  render() {
    return (
      <div className="service-page">
        <h1>Mechanical Products</h1>
        <div className="section-header-line"></div>
      </div>
    )
  }
}

export default MechanicalProductPage;

＆＃13;

这是我的webpack.config.js：

＆＃13;

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devServer: {
        inline: true,
        historyApiFallback: true,
        contentBase: './src',
        // contentBase: './',
        port: 3000,
        historyApiFallback: true
    },
    devtool: 'cheap-module-eval-source-map',
    entry: './dev/js/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // loader: ['babel?retainLines=true'],
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react'],
                    plugins: ['transform-class-properties']
                }
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ],
    },
    output: {
        path: 'src',
        filename: 'js/bundle.min.js'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
};

＆＃13;

当＆＃34;卡组件＆＃34;在ProductPage.js中点击了它，它带我去＆＃34; / products / mechanical-products＆＃34;正在呈现的页面和正确的组件。但是，当我在渲染组件后刷新页面时，页面中断并且没有弹出任何内容。我在控制台中没有收到任何错误。

有人可以帮我解决这个问题吗？

刷新时React Router Route分页符

0 个答案: