React Router URL parameters does not work

reactjs react-router

502 观看

3回复

373 作者的声誉

I have my router setup as follow

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

export default AppRouter;

and Profile component as follow

const Profile = () => {

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

 };

 export default Profile;

This works perfectly fine. However, when I tried to pass in url parameters like so

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] Disconnected! 139:45:10 loading pref showConsoleLogs before prefs were initialised, you will not get the correct result content-script.bundle.js:333:7 Loading failed for the with source “http://localhost:8080/profile/bundle.js”. 324:9

It seems that it was trying to look for bundle.js in the wrong location. What am I doing wrong? Here is the webpack config

 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
    }
 };
作者: Scicare 的来源 发布者: 2017 年 12 月 27 日

回应 3


0

1 作者的声誉

{props.match.params.id} --> {props.params.id} try changing this and it should work

作者: Superve 发布者: 2017 年 12 月 27 日

0

1312 作者的声誉

Check out the working code here: https://codesandbox.io/s/6w1y84pv1r

I haven't changed much from your code, so the problem probably lies in your webpack dev server configuration. I've also removed a typo in your code; an extra > on the line with the profile route.

When you open the link I've shared, navigate to /profile/123 to see the path param being consumed, and rendered on the page.

作者: Shishir 发布者: 2017 年 12 月 28 日

1

112 作者的声誉

决定

If you run add-ons and extensions in your browser, such as: Ghostery 8, it could be that. Disable Ghostery and refresh your browser to double check the warning in the console.

作者: urbanaut 发布者: 2018 年 1 月 8 日
32x32