React Router URL 抛出参数错误

Question

React Router URL 抛出参数错误

Int*_*uin 2 javascript node.js reactjs webpack react-router

我正在尝试使用 react 路由器来拥有动态配置文件页面，最好将其放在斜杠中而不是像 ? URL 中的参数通配符。我正在寻找像/profile/{username}/而不是/profile?user={username}如果这有意义。

这是我用来尝试实现这一目标的路线；

<Route path="/profile/:name/" component={Profile}/>

Run Code Online (Sandbox Code Playgroud)

但是，当我尝试像 `/profile/jeff/' 或任何其他内容那样进入这条路线时，它会返回一个 bundle.js（webpack'd），它是一个空白的 HTML 模板，这出乎意料地出现在 bundle.js 中并抛出一个错误。知道如何解决这个问题吗？谢谢。

这是返回的 bundle.js；

<html>
<body style="margin:0px; padding: 0px;">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <div id = "root" style="margin:0px; padding: 0px;"></div>
    <script src="bundle.js"></script>
</body>

Run Code Online (Sandbox Code Playgroud)

配置文件组件；

import React from 'react';
import styles from './profile.scss';
import astyles from './allpages.scss';

export default class Profile extends React.Component{
render(){

    console.log("hello!");

    const { match, location, history } = this.props

    console.log(location);
    console.log(match);
    console.log(history);

    return(
        <div className = {styles.borderContainer}>
            <p> {this.props.param.name} </p>
        </div>
    )
}
}

Run Code Online (Sandbox Code Playgroud)

网络包配置；

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
require('style-loader');
require('css-loader');

const loaders = {
    css: {
        loader: 'css-loader'
    },
    postcss: {
        loader: 'postcss-loader',
        options: {
            plugins: (loader) => [
                autoprefixer({
                    browsers: ['last 2 versions']
                })
            ]
        }
    },
    sass: {
        loader: 'sass-loader',
        options: {
            indentedSyntax: true,
            includePaths: [path.resolve(__dirname, './src/app')]
        }
    }
}


module.exports = {
    context: __dirname,
    entry: './src/app/index.js',
    output: {
        path: __dirname + '/dist/',
        filename: 'bundle.js',
        libraryTarget: 'umd'
    },
    devtool: "sourceMap",
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',

                    // Could also be write as follow:
                    // use: 'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                modules: true,
                                localIdentName: '[name]__[local]___[hash:base64:5]'
                            }
                        },
                        'postcss-loader'
                    ]
                }),
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',

                    // Could also be write as follow:
                    // use: 'css-loader?modules&importLoader=2&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader'
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                modules: true,
                                sourceMap: true,
                                importLoaders: 2,
                                localIdentName: '[name]__[local]___[hash:base64:5]'
                            }
                        },
                        'sass-loader'
                    ]
                }),
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
    ],
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mic*_*ngo 7

当您请求/profile/jeff/为index.html您发布的内容提供服务时，大概是为您的服务器上不存在的每个资源完成的（作为后备）。在index.html你有以下脚本标签：

<script src="bundle.js"></script>

Run Code Online (Sandbox Code Playgroud)

这是一个相对路径。此时您实际上是在请求/profile/jeff/bundle.js，因为它不存在，所以您最终将index.html用作捆绑包，这是有问题的，因为它不是有效的 JavaScript。

/bundle.js无论当前 URL 是什么，您都应该始终使用。同样，你总是想要/styles.css你的 CSS。

<link rel="stylesheet" href="/styles.css">
<script src="/bundle.js"></script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，5 月前
查看次数：	1696 次
最近记录：	8 年，5 月前