I have index.js as below code:
<relevant imports>
function Header(){
return(<HeaderComponent/>);
}
ReactDOM.render(
<div>
<Router>
<div>
<Switch>
<Route path="/page1" component={page1} />
<Route path="/page2" component={page2} />
<Route path="/page3" component={page3} />
<Route path="/home" component={PortfolioPageComponent} />
<Route path="/" component={WelcomePage} />
</Switch>
</div>
</Router>
</div>,
document.getElementById('root')
);
ReactDOM.render(<Header />, document.getElementById('page-header'));
now when I am opening my app it goes to WelcomePage .In this component I have authorization logic. once Authetication is done, Page is redirecting to PortfolioPageComponent but header component is NOT getting reloaded.
How can I re-render Header component also on each redirection?
Putting the header component OUTSIDE the switch component allows it to render with each route. This way, no matter which route you navigate to, the components outside of the switch will always be rendered. This could be including a header before the switch component and a footer afterwards.
Related
Hello stackoverflow so I have a custom components inside of my create simpleform looking like this.
<Create {...props}>
<SimpleForm {...props}>
<TextField id="standard-basic" onChange={onChangeLabel} value={entityLabel} placeholder="Audience label" />
<br />
<EntityInput onSelectEntity={addEntity} entityNames={entityNames} />
<TagInput setSelectedTags={addSelectedTag} selectedTags={selectedTags} />
<br />
</SimpleForm>
</Create>
My question is how do I enable the save button and pass in custom data and tell the save button which records to create?
I have an app where i'm using react router and I can't figure out how to change the route in this use case. Here's how my code is structured:
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router>
<Panels />
<Route path="/view" render={()=> <MyComponent />} />
<Route path="/about" render={()=> <MyOtherComponent />} />
</Router>
Inside <Panels> are some tabs I have that I would like to change the route.
<Tabs defaultActiveKey="1" onChange={}>
<TabPane tab="Tab 1" key="1" >
<Somecomponent />
</TabPane>
<TabPane tab="Tab 2" key="2">
Test me
</TabPane>
</Tabs>
These are antd tabs so they don't have a clickable component that I can put a <Link> into, and <Panels> is outside of a <Route> so I'm not sure if I'm able to access history object otherwise. I could put the panels in each <Route> but that would be really bad.
What way should I go about this?
Figured this one out finally.
import { withRouter } from 'react-router-dom'
...
<Tabs defaultActiveKey="1" onChange={(key)=> this.props.history.push(`/${key}`)}>
<TabPane tab="Tab 1" key="1" >
<Somecomponent />
</TabPane>
<TabPane tab="Tab 2" key="2">
Test me
</TabPane>
</Tabs>
...
export default withRouter(Panels);
wrapping the export with withRouter give the component access to the history object to push and read routes. I saw this solution initially but couldn't get it to work. Turns out it was because I was importing withRouter from react-router and not react-router-dom, so I was loading in the wrong history.
I would like to implement that kind of routes in react-router v4.
/auth => auth home page
/auth/login => login page
/auth/register => register page
/auth/forgot => lost password page
/auth/reset => change password page
It doesn't work with <Switch> because it first match /auth and render the associated component. So as I click on the link to go to the login page for instance it renders the Auth Component and not the Login Component.
How can I implement that behavior with react-router ?
I tried nested routing but if I take the same example as before, It would renders the Auth Component + Login Component.
Thanks.
You can add the exact prop to your /auth route:
<Switch>
<Route exact path='/auth' component={Auth} />
<Route path='/auth/login' component={Login} />
<Route path='/auth/register' component={Register} />
<Route path='/auth/forgot' component={ForgotPassword} />
<Route path='/auth/reset' component={ChangePassword} />
</Switch>
Alternatively, you could move your /auth route to the end of the list so other routes match first:
<Switch>
<Route path='/auth/login' component={Login} />
<Route path='/auth/register' component={Register} />
<Route path='/auth/forgot' component={ForgotPassword} />
<Route path='/auth/reset' component={ChangePassword} />
<Route path='/auth' component={Auth} />
</Switch>
I hope this helps.
I have a server that renders the same single page app for multiple URLS :
/
/A
/B
I want A to act as a "Home" page.
So a browser request to "/" or "/A" should display the same thing.
In particular, I'll have links to pages A and B, and I want the link to A to be marked as active for "/" and "/A".
So I'm using something like :
<NavLink to="/A" activeClassName='nav-active'>Go to A</NavLink>
<NavLink to="/B" activeClassName='nav-active'>Go to B</NavLink>
<Router>
<Route path='/A' component={A} />
<Route path='/B' component={B} />
</Router>
How would I make "/" as a synonym for "/A" ? What I tried :
adding another Route with path="/" : this results in two components being displayed
using a regexp like path="/(A)?" : this displays the right component, but the link ist not marked as active
Should I implement it as a server side redirect instead (just making / redirect to /A rather than serving the same page content ?)
It seems like a Redirect does the trick
<Router>
<Route path='/A' component={A} />
<Route path='/B' component={B} />
<Route path='/' render={() => (
<Redirect to='/A' />
)} />
</Router>
You can add exact={true}
<Router>
<Route path='/' exact={true} component={A} />
<Route path='/A' exact={true} component={A} />
<Route path='/B' exact={true} component={B} />
</Router>
I've struggling for two days to styling components on Native Base with <StyleProvider>. I want to change background color of header and add custom style property on the button.
<Container>
<Header /> /*change backgroundColor*/
<Content>
<Button viewDetail block> /*add 'viewDetail' as custom style property */
<Text>Button</Text>
</Button>
</Content>
</Container>
I think, I have the answer for my own question.
Import all components from 'native-base-theme/components/' instead of variables.
The code will be like this
import getTheme from './native-base-theme/components';
and add <StyleProvider>, then add prop style <StyleProvider style={getTheme()}>.
There are many ways of doing this. One way would be to follow the instructions given here. Alternatively, you can change the button theme file and add a similar style property like success shown here.
I hope this will help you,
You must be using NativeBase2
<StyleProvider style={getTheme(commonColor)}>
<Header>
<Left>
<Button transparent>
<Icon name="arrow-back" onPress={() => this.props.routerActions.pop()} />
</Button>
</Left>
<Body>
<Title>Profile</Title>
</Body>
<Right></Right>
</Header>
</StyleProvider>
For ejecting theme,
Just open this link and follow
http://nativebase.io/docs/v2.0.0/customize#themingNativeBaseApp
Now If you want to customise just look for
native-base-theme/components/Header.js
native-base-theme/variables/commonColor.js