CODEWITHSUNDEEP
javascriptreactjsreact-router
user3241846
user3241846

Reputation: 677

React router not matching base path

Im practicing with react router and need to have an :id param. It matches with the an id in the url e.g. /edit/2 but not with the base case with just /edit.

Main app router file

import React from 'react';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
import landingPage from '../components/landingPage';
import editPage from '../components/editPage';
import createPage from '../components/createPage';
import helpPage from '../components/helpPage';
import notFoundPage from '../components/notFoundPage';
import Header from '../components/header';


const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header/>
            <Switch>
                <Route exact={true} path="/" component={landingPage}/>
                <Route path="/create" component={createPage}/>
                <Route exact={false} path="/edit/:id" component={editPage}/>
                <Route path="/help" component={helpPage}/>
                <Route component={notFoundPage}/>
            </Switch>
        </div>
    </BrowserRouter>
);

export default AppRouter;

editPage code

import React from 'react';

const editPage = (props) => {
    console.log(props)
    return (
    <div>Edit Page</div>
    );
}
export default editPage;

Upvotes: 0

Views: 965

Answers (1)

dave
dave

Reputation: 64725

If you are on React Router >= v4, you can make a parameter optional by adding a ? after the parameter name:

<Route exact={false} path="/edit/:id?" component={editPage}/>

Upvotes: 1

Related Questions