Question

我正在尝试使用React路由器v04创建一个简单的路由器。我有两个链接，如果我按它们，网址将更新。然而，页面不会更改，只显示确切的路径。如果我刷新页面它将更新，但这不会自动进行。

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

import About from './pages/about'
import Home from './pages/home'

const app = document.getElementById('app');

ReactDOM.render(
<Router>
    <div> 
        <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
        </ul>

    <hr/>

        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
    </div>
</Router>
, app);

home.js

import React from 'react'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

export default Home

about.js

import React from 'react'

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

export default About

我已将此添加到webpack.config.js但它不起作用：

  devServer: {
    historyApiFallback: true,
    hot: true,
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },

这是我的webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

有人能告诉我我做错了什么吗？ THX！

React Router 4不更新页面

0 个答案: