Reputation: 441
I have my root component main switch like this
<Provider store={createStoreWithMiddleware(reducers)}>
<HashRouter history={history} >
<Switch>
<Route exact path="/login" name="Login Page" component={Login}/>
<Route exact path="/register" name="Register Page" component={Register}/>
<Route exact path="/404" name="Page 404" component={Page404}/>
<Route exact path="/500" name="Page 500" component={Page500}/>
<Route path="/Console" name="Console" component={Console}/>
<Route path="/" name="Home" component={Full}/>
</Switch>
</HashRouter>
</Provider>
And inside the Console
component I have another switch defined like this
<main className="container">
<div className="">
<Switch>
<Route path="/Create" name="Create Park" component={CreateNew} />
<Route path="/" name="Console" component={HomePage} />
</Switch>
</div>
</main>
When I visit /Console
HomePage
component shows properly.
But the when I visit /Console/Create
CreateNew
component would not show but instead shows HomePage
component.
What I am doing wrong here ? What should I do to show CreateNew
component at /Console/Create
Upvotes: 2
Views: 419
Reputation: 282160
The nested Routes must have an absolute path specified, You can use match.path
as a prefix to the nested Route to provide the path as an absolute one
<main className="container">
<div className="">
<Switch>
<Route path={`${match.path}/Create`} name="Create Park" component={CreateNew} />
<Route path={`${match.path}/`} name="Console" component={HomePage} />
</Switch>
</div>
</main>
or else specify the complete path
<main className="container">
<div className="">
<Switch>
<Route path="/Console/Create" name="Create Park" component={CreateNew} />
<Route path="/Console/" name="Console" component={HomePage} />
</Switch>
</div>
</main>
According to React-Router match
documentation:
A match object contains information about how a matched the URL. match objects contain the following properties:
params - (object)
Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
isExact - (boolean)
true if the entire URL was matched (no trailing characters)
path - (string)
The path pattern used to match. Useful for building nested s
url - (string)
The matched portion of the URL. Useful for building nested s
Upvotes: 3
Reputation: 152
the Console component is refactored as following:
<main className="container">
<div className="">
<Switch>
<Route exact path="/" name="Console" component={HomePage} />
<Route exact path="/Create" name="Create Park" component={CreateNew} />
</Switch>
</div>
</main>
Upvotes: 0