CODEWITHSUNDEEP
reactjsreact-router
Scicare
Scicare

Reputation: 833

React Router URL parameters does not work

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
    }
 };

Upvotes: 0

Views: 1008

Answers (3)

Scott Phillips
Scott Phillips

Reputation: 177

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.

Upvotes: 1

Shishir
Shishir

Reputation: 2546

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.

Upvotes: 0

Superve
Superve

Reputation: 11

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

Upvotes: 0

Related Questions