时间戳

首页 > 解决方案 > React 路由器：添加动态 URL

reactjs - React 路由器：添加动态 URL

问题描述

我正在使用 React Router Dom 4.2.2

目前我有一个路由器如下：

import React from 'react';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
import ExpensesDashboardPage from "../components/ExpensesDashboardPage";
import AddExpensePage from "../components/AddExpensePage";
import EditExpensePage from "../components/EditExpensePage";
import HelpPage from "../components/HelpPage";
import NotFoundPage from "../components/NotFoundPage";
import Header from "../components/Header";

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header/>
            <Switch>
                <Route path='/' component={ExpensesDashboardPage} exact={true}/>
                <Route path='/create' component={AddExpensePage}/>
                <Route path='/edit/' component={EditExpensePage}/>
                <Route path='/help' component={HelpPage}/>
                <Route component={NotFoundPage}/>
            </Switch>
        </div>
    </BrowserRouter>
);
export default AppRouter;

而且我已经测试过我们可以导航到每一条路线。

然后我想到了使用动态URL如下：

 <Route path='/edit/:id' component={EditExpensePage}/>

那么我们应该渲染的组件是：

import React from 'react';

const EditExpensePage = (props) => {
    console.log(props);
    return (
        <div>
            This is the Edit Expenses page, enjoy!
        </div>
    );
};
export default EditExpensePage;

这里的问题如下：

为什么如果我们访问以下 URL: http://localhost:8080/edit/33，控制台会输出：

GET http://localhost:8080/edit/bundle.js 404 (Not Found)
33:1 Refused to execute script from 'http://localhost:8080/edit/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

我希望看到页面被加载并进入匹配道具，一个带有id: 33

我也读过

如何在 React Router 4 中实现动态路由？

谢谢您的帮助！

标签： reactjsreact-router-v4react-router-dom

解决方案

我也有同样的问题。我打赌你正在观看 Andrew Mead 的React Udemy 教程。我尝试了@mani.saffarnia 提供的解决方案。没有工作。以下是我如何让它发挥作用：

  1. 在输出块和 devserver 块中设置属性公共路径，如publicPath: '/'webpack.config.js 中的那样。
  2. 还要在 webpack 开发服务器中将默认 webpack 服务器端口从 8080 更改为 8082（任何随机未使用的端口），以确保没有缓存。
  3. 删除的节点模块。
  4. 使用清除 npm 缓存npm cache clean --force
  5. 删除公用文件夹并重新安装节点模块并创建一个新的公用文件夹来服务 index.html 和 bundle.js
  6. 最后运行开发服务器以获得工作输出

这是我针对已修复问题的最终 webpack 配置。

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output:{
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    module:{
        rules:[
            {
                loader:'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test:/\.s?css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    devtool:'inline-source-map',
    devServer:{
        contentBase : path.resolve(__dirname, 'public'),
        historyApiFallback: true,
        publicPath: '/',
        port: 8082
    }

};

推荐阅读