I used a code similar to the code mentioned below in my app using React Router.
<Route path="/" handler={App}>
<Route path="login" handler={LogIn}/>
</Route>
Suppose I have created a header field in App file like "Welcome to the page",it shows while running. But if I use another header for Log In page like "welcome to log in page",while running it shows like
Welcome to the page
Welcome to log in
means it attach new header with the previous page's. But I want to use the header differently. So, how can I do that?
This happens because your Login component is mounted inside App component so everything in the App component will be always visible. Think about it as having box inside the box. The solution to that would be to:
if you're using version 0.13.x: make use of DefaultRoute (check the example in the 0.13.x docs)
if you're using version 1.0.0-rc3: make use of IndexRoute
and then you just put your header in a new component which will be mounted when you hit / URL.
Your routes would look something like:
version 0.13.x:
<Route name="app" path="/" handler={App}>
<Route name="login" handler={Login}/>
<DefaultRoute handler={Header}/>
</Route>
version 1.0.0-rc3:
<Route path="/" component={App}>
<IndexRoute component={Header} />
<Route path="inbox" component={Login} />
</Route>
Just as a side note as that would be probably your next question:
React Router 1.0 provides very nice API for handling the authentication, I guess this is something you are trying to do. If that's the case, have a look at the auth-flow example. And the onEnter.
Related
There may be a better solution here than using regex, but not sure how to go about it.
The issue is that I want my navigation component that lives in a component called MainLayout to show on all routes except on /login & `/logout
Currently, I have the following 3 routes
<Route exact path="/logout" component={Logout} />
<Route exact path="/login" component={Login} />
<Route
exact
path="/:subdirectory?/:nested?/:id?/"
component={MainLayout}
/>
So navigating to /login or /logout will render either Login or Logout and also MainLayout which is understandable with the current setup.
However, is there a way to use regex (or any other means) to check that if /:subdirectory is either /login or /logout then do not render component?
I'm trying to do something like this
<Switch>
<SomeNavBar>
<Route path="page1">Page 1</Route>
<Route path="page2">Page 2</Route>
<Route path="page3">Page 3</Route>
</SomeNavBar>
<OtherNavBar>
<Route path="admin">Admin Page</Route>
</OtherNavBar>
</Switch>
Where I have wrapper component for a routes that are not the admin page.
However the admin route does not render Admin Page it just renders a blank page. The other routes work fine.
Is there a way to achieve this behavior?
There's a couple of issues with your example not related to the question which you should rectify before anything else.
The first is that the direct children of a Switch must always be a Route or Redirect - it doesn't know what to do with any other element and will just render the first thing it sees (in your case, the SomeNavBar component). The second is that path declarations must be prepended with a slash for the router to build them correctly, so /page1 and /admin for example.
With that out the way, here is a somewhat contrived example of how to get the behaviour you are after. For the pages, we are checking from a list of possible fragments before rendering SomeNavBar and the correct route. Notice also the exact parameter - this is so we don't also match paths that only begin with the specificed fragment, like /page1foo:
<Switch>
<Route exact path={['/page1', '/page2', '/page3']}>
<SomeNavBar>
<Route path="/page1">Page 1</Route>
<Route path="/page2">Page 2</Route>
<Route path="/page3">Page 3</Route>
</SomeNavBar>
</Route>
<Route path="/admin">
<OtherNavBar>
Admin Page
</OtherNavBar>
</Route>
</Switch>
I have a React App with Routers, I also have 404 component, etc.
But I don't know how to send 404 header to google bot.
I'mm just thinking that it's not possible due React app without SSR.
Am I right?
If you are using Router, you can set your pages like this:
<Router>
<Switch>
<Route exact path = "/home" component={HomePage} />
<Route exact path = "/sign-up" component={SignUpPage} />
<Route exact path = "/login" component={LoginPage} />
<Route exact path="/incorrect-login" component={IncorrectLoginPage} />
<Route exact path = "*" component={PageNotFound} /> //404 Component
</Switch>
</Router>
With this, you set your PageNotFound to the bottom of your router list where if the url of the React App does not correspond to any of your previous urls, then the PageNotFound route is triggered. You can just render your not found component under that page like you would for any other page in your application.
I also used exact so that the url must be exactly the same along with a Switch statement so that only a SINGLE page component can be triggered at once. The * basically just means ALL other urls besides those specified previously.
The PageNotFound is treated as kind of like a default catch statement so it's at the bottom
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 want to build a Sub route of a main website in React. My doubt is how to structure the Routes in React router.
Eg. Main Website starts at '/' and when '/react' appears the react
app should take over.
How should the Routes be structure like
<Route path="/">
<Route path="/react">
//...rest of the child routes
</Route>
</Route>
OR
There should be a server side express route with "/react" which starts the react app
Something like this
app.get('/react',(req,res)=>{
match({history,routes,location},(error,redirect,renderProps)=>{
//..rest of the code
})
})
In that case can the routes be structured this way?
<Route path='/'>
<IndexRoute/>
//..rest of the routes
</Route>
With React Router component you specify routes only in client side. So on server side it should be like this:
app.get('*',(req,res)=>{
// return Index page for every GET request
})
On the client side there is no one right way to implement this. The simplest way is to use nested routes like this:
<Route path="/">
<Route path="/react">
//...rest of the child routes
</Route>
</Route>
Another way to create variable with /react routes and insert it in core routes (you can import this variable from another file in the future and realize module structure for your router):
const reactSubRoute =
<Route path="/react">
//...rest of the child routes
</Route>
<Route path="/">
{reactSubRoute}
</Route>
Using <IndexRoute /> may be not necessary for your situation. If you want more info about <IndexRoute /> read this article.