Here is my Router Implementation
<BrowserRouter>
<div>
<Route exact path="/" component={ProfilesIndex} />
<Route exact path="/profiles" component={ProfilesIndex} />
<Route exact path="/profiles/new" component={ProfileEditor} />
<Route exact path="/profiles/:id" component={ProfileEditor} />
</div>
</BrowserRouter>
When I am browsing to /profiles/new path, it is rendering the ProfileEditor component twice. For every other route, it is working fine.
Can someone suggest how to fix this problem ?
I found the answer after browsing into multiple sections in Router Docs. Problem was it was matching multiple routes
When user opens /profiles/new it matches two routes
/routes/new
/routes/:id
Because :id is like a wildcard * and it also matches new word so both routes get matched and hence the component gets rendered twice.
The solution is to wrap the routes with Switch if you do not want to match multiple routes.
<BrowserRouter>
<Switch>
<Route exact path="/" component={ProfilesIndex} />
<Route exact path="/profiles" component={ProfilesIndex} />
<Route exact path="/profiles/new" component={ProfileEditor} />
<Route exact path="/profiles/:id" component={ProfileEditor} />
</Switch>
</BrowserRouter>
For anyone coming here from v6+
exact prop no longer exists, the paths are exact by default if they aren't appended a wildcard *
However I was still getting a double render. I ran a prod build and checked and the double render is gone so probably nothing to worry about - sometimes hooks run twice in development mode (I guess that's what's happening internally)
for me, this is because of React.StrictNode which is wrapped arround App component.
it intentionally double render components (only in development) to enforce you, not use side effects on some of your component's
lifecycle events.
the reason behind that is documented here
Related
I have a React Route with significant user input that I want to use the Prompt component with. I'm importing it from react-router-dom without error and adding the component to the render method of the class component, but no matter what, the prompt alert never actually appears and the user can freely navigate off the page without seeing any alert.
I've tried:
Putting the component in with when={aStateBooleanVariable} as well as when={true} and no when attribute at all.
Using a function for the message.
Ensuring that the Route it's on is an exact path.
Importing it from react-router instead of react-router-dom.
Moving the component around within the render method.
Moving the Prompt into the actual Switch statement itself in the App component that wraps everything in BrowserRouter.
Nothing I've tried has gotten the prompt to actually show up or prevent the user from navigating off the page and I've been unable to find anything in the docs or extensive searching where anyone else has had this problem. Does anyone have any idea why this just isn't even starting to work?
I'm not really sure what code to put since it's all pretty much boilerplate react-router-dom.
This is my App.jsx switch statement:
return (
<BrowserRouter>
<header>
{loggedInUser ? <NavbarComp loggedInUser={loggedInUser} setLoggedInUser={setLoggedInUser} /> : null}
</header>
<Switch>
<PrivateRoute path="/ged/campaigns/new" component={CampaignNew} loggedInUser={loggedInUser} />} />
<PrivateRoute path="/ged/campaigns/:id" component={Campaign} loggedInUser={loggedInUser} />} />
<PrivateRoute path="/ged/characters/new" component={CharGen} loggedInUser={loggedInUser} />} />
<PrivateRoute path="/ged/characters/:id" component={CharacterMain} loggedInUser={loggedInUser} />} />
<PrivateRoute path="/ged" component={GEDHome} loggedInUser={loggedInUser} />} />
<Route path="/" component={Home} loggedInUser={loggedInUser} setLoggedInUser={setLoggedInUser} />} />
<Route component={DeadPage} />
</Switch>
</BrowserRouter>
)
I'm importing the component as:
import {Prompt} from 'react-router-dom';
And incorporating the component at the top of its parent's render method return:
<Prompt message="You have changes that will be lost if you leave without saving." />
What other code might be making it fail silently like this?
what I want to do is that my website has admin panel with the following routes /admin/.... and then the normal web would be /...
But the urls come together when I enter / works well but when I enter /admin you see the web menu and the admin menu when you would only have to see the menu of the administrator I leave the demo that performed in CodeSandBox, I hope you can help me.
https://codesandbox.io/s/react-router-admin-users-5wzte
Greetings and thanks.
Wrap your routes in a Switch component. The Switch will return only the first matched route. More info is available here:
https://reacttraining.com/react-router/web/guides/basic-components
The issue is because, your path /admin getting matched with your both Route.
You need to provide an exact prop,
<Route
path="/"
exact //exact prop will help to match exact path
render={userProps => (
<Layout match={userProps.match}>
<h2>Menu Web</h2>
<Route exact path="/" component={Home} /> //Add exact here also otherwise it will get match for path `/contact`
<Route path="/contact" component={Contact} />
</Layout>
)}
/>
Also you need to make use of Switch, which
Renders the first child <Route> or <Redirect> that matches the location.
Just wrap your Route with Switch.
I'm trying to render a component that plays an mp3 on each route, and have the mp3 continue to play uninterrupted despite route changes. I'm not sure if this is possible, but i'd assume it is considering React creates single page sites.
So far i've only gotten as far as getting the component to render, my problem is all of the functionality along with the component has seized to work... I can't figure out why..
<HashRouter>
<Route path="/" render={props => <Music />} />
<Route exact path="/" component={Home} />
<Route path="/work" component={MyWork} />
<Route path="/about" component={About} />
</HashRouter>
The Route in question is the first one.
I've also tried this thinking I needed to pass down the props in order for the functionality to work
<Route path="/" render={props => <Music
changePlayingState={props.changePlayingState}
playing={props.state.playing}
showMusicMessage={props.showMusicMessage}
hideMusicMessage={props.hideMusicMessage}/>} />
A working version of the component(and how i would like it to appear on all routes) is shown on the home page(click play) code sandbox had a file size limit so i just added some popping sound effects(takes a second to start playing)
https://codesandbox.io/s/rlw1q45m1m
The only components regarding this question (and the only you'll need to view)are as follows:
Index.js
The routes: Home.js, About.js, MyWork.js
Music Component: Music.js
If any additional information is needed please ask! Thanks!
You just have to pull out the Music Component and make it a stand alone Component in itself then pass it down to the HashRouter within a single child and rest of the Routes.
Here is an example to implement NavBar in each route of the React App.
I am creating routing for my react app, could someone explain me difference between these two approaches.
From user point of view they work the same, what is the difference in performance, best practice?
First one is multiple Routes rendering different component for the same path:
<Route path='/:shop/booking' component={Services}/>
<Route path='/:shop/booking' component={Calendar}/>
Second is single path rendering components as props.children(?) :
<Route path='/:shop/booking'>
<Aux>
<Services/>
<Calendar/>
</Aux>
</Route>
<Route path='/'>
<Component>
</Route>
Is equivalent to :
<Route path='/' children={Component}/>
According to this : https://reacttraining.com/react-router/core/api/Route/children-func :
Sometimes you need to render whether the path matches the location or
not. In these cases, you can use the function children prop. It works
exactly like render except that it gets called whether there is a
match or not.The children render prop receives all the same route
props as the component and render methods, except when a route fails
to match the URL, then match is null. This allows you to dynamically
adjust your UI based on whether or not the route matches.
So by giving children prop instead of component to your route, you force it to render even if the current URL does not match. And I might be mistaking but it seems that adding a component prop to a route override its children prop.
Thus you cannot expect the same behavior for this two pieces of code :
<Route path='/:shop/booking' component={Services}/>
<Route path='/:shop/booking' component={Calendar}/>
Shows the two components for the specified path.
<Route path='/:shop/booking'>
<Aux>
<Services/>
<Calendar/>
</Aux>
</Route>
Shows the two components wrapped in another, for any path.
Finally, I would say that the best practice in React is to wrap your two components into one, and add it to the component prop of a route instead of creating two routes with the exact same path.
If you cannot wrap your two components because one has to be displayed on several routes, you can use something like the following :
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path='/' component={Home}/>
<Route path='/foo' component={Foo}/>
<Route path='/foo2' component={Foo2}/>
</Switch>
<Footer />
</div>
</BrowserRouter>
I have a route
<Route exact path="/view/:personID" component={PersonView} />
It works fine, however /view still renders, albeit with no person in it. Is there a way to disallow this path or turn in into a 404?
Answer was to use switch
<Switch>
<Route exact path="/view/:personID" component={PersonView} />
<Redirect from='/view' to='/' />
</Switch>
You can manage this on your component, in the render section test if you have your personID if not return a custom error/view.