Question

我的路由器设置如下

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header/>
            <Switch>
                <Route path='/' component={Index} exact={true}/>
                <Route path='/profile' component={Profile}/>>
            </Switch>
        </div>
    </BrowserRouter>
);

export default AppRouter;

和Profile组件如下

const Profile = () => {

    return(
        <div>
            This is from profile
        </div>
    )

 };

 export default Profile;

这完全没问题。但是，当我尝试传递url参数时，如此

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header/>
            <Switch>
                <Route path='/' component={Index} exact={true}/>
                <Route path='/profile/:id' component={Profile}/>>
            </Switch>
        </div>
    </BrowserRouter>
);

    const Profile = (props) => {

    console.log(props);

    return(
        <div>
            This is from profile
        </div>
    )

};

[WDS]已断开连接！ 139：45：10 在prefs初始化之前加载pref showConsoleLogs，您将无法获得正确的结果 content-script.bundle.js：333：7 with的加载失败来源“http://localhost:8080/profile/bundle.js”。 324：9

似乎它试图在错误的位置寻找bundle.js。我究竟做错了什么？这是webpack配置

 const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {   
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer:{
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true
    }
 };

Answer 1

如果您在浏览器中运行加载项和扩展程序，例如：Ghostery 8，则可能是这样。禁用Ghostery并刷新浏览器以仔细检查控制台中的警告。

Answer 2

{props.match.params.id} - ＆gt; {props.params.id}尝试改变它，它应该工作

Answer 3

在这里查看工作代码： https://codesandbox.io/s/6w1y84pv1r

我的代码没有太大变化，所以问题可能在于你的webpack dev服务器配置。我还删除了代码中的拼写错误;带有配置文件路线的额外>。

当您打开我已共享的链接时，请导航至/profile/123以查看正在使用的路径参数，并在页面上呈现。

React Router URL参数不起作用

3 个答案: