Question

运行基本示例的Triyng

我有Yarn + Webpack2 + Babel es2015

这是我的切入点：

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

     const BasicExample = () => (
        <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>
    );

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

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

    ReactDOM.render(
        <BasicExample/>,
        document.getElementById('root')
    );

项目http://localhost:8080开始良好，链接工作正常，从Home和About组件中呈现内容。

但是当我试图输入网址http://localhost:8080/about时 - 控制台显示我

获取http://localhost:8080/about 404（未找到）

我在Stack上发现了许多几乎相同的问题，但找不到适用于我的解决方案在什么反应路由器拦截传入的URL？由于我的Yarn \ Webpack设置，这可能不起作用？

____________的 UPDATE_1 Webpack配置

const path = require('path');
let webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: path.join(__dirname, 'index.html'),
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    /*devServer: {
        host: "DESKTOP-A5FTMD8", // Can change port
        port: 8080
    },*/
    entry: path.join(__dirname, 'index.jsx'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        loaders: [
            {test: /\.(less|css)$/, loader: 'style-loader!css-loader!less-loader'},
            {test: /\.(xml)$/, loader: 'xml-loader'},
            {test: /\.(svg|png|jpg|jpeg)$/, loader: 'file-loader'},
            {
                test: /\.(js|jsx|es6)$/,
                exclude: /node_modules/,
                loader: 'react-hot-loader!babel-loader?presets[]=react,presets[]=es2015'
            },
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.es6']
    },
    plugins: [
        HtmlWebpackPluginConfig
    ]
};

Answer 1

webpack config中的此解决方案解决了这个问题：

devServer: {
    historyApiFallback: true <-- this needs to be set to true
}

This answer

React-Routing基本示例路径不起作用

1 个答案: