My index.js file has the following components
ReactDOM.render( <React.StrictMode>
</React.StrictMode>, document.getElementById('root') );
My Navigation Bar was built based on Bootstrap 5 Navbar components. How do I disable when I click on the search button in the navigation bar and activates the component ?
Pls help
Related
I'm trying to make the usual drawer navigator app by having the Menu icon/button at the top-left corner of the screen, I can get it to the header/top but can't get it to the left, it always get stuck in the middle somehow, here is what it looks like:
Here is the render code:
render() {
return (
<Container>
<Header>
<Left>
<Icon name='ios-menu' onPress={() =>
this.props.navigation.dispatch(DrawerActions.openDrawer())} />
</Left>
</Header>
<AppTabNavigator/>
</Container>
);
}
I've tried setting some stylesheet properties to alignSelf, anything to center it but could not manage to get it correctly.
I think you need to have empty Body and Right components inside the Header
I have a app.html file that has this code.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
<ActionBar title="Tooling U-SME" class="action-bar" height="50">
<StackLayout orientation="horizontal"
ios:horizontalAlignment="center"
android:horizontalAlignment="center">
<Image src="res://tulogo" stretch="none"></Image>
</StackLayout>
</ActionBar>
<page-router-outlet></page-router-outlet>
</Page>
The action bar appears ok on my root default page with the proper page-router-outlet, but when the outlet changes the action bar does not appear. Instead a kind of default action bar appears. How do I have an action bar common to all my page views?
Did you go through the basics in NativeScript Angular? There are few core differences in declaring your components in HTML vs XML (Core NativeScript)
You suppose to not declare Page element, page-router-outlet actually does that for you. Try to declare action bar in your components which you are going to load inside page-router-outlet.
After reading this post I figured it out:
https://dzone.com/articles/working-with-angular-modules-in-nativescript-apps
I hadn't imported NativeScriptCommonModule in my Feature Module.
Can anyone explain to me how Routing works in Reactjs?
browserHistory.push('/location')
only updates the URL bar and doesn't redirect to it.
browserHistory.goBack()
works but only when the page has been visited before, hence the name.
Which makes it difficult for me to understand how browserHitory.goForward() works?
I have been trying to redirect to dashboard after a successful login. That's it.
From what I have read, React does not allow reloading a page. It will show a cannot GET /path error if we try to refresh the page or write the address in the url; unless the request is made on the server. I tried to create routes on server, but cannot get the syntax as to how I achieve it. I have only coded in Node to the extent of sending res.send() to the client app. How do I render that path? Because rendering to that path would mean that the Node's App.js has the view engine of the React app.
I don't know if it's clear enough, but any advice would be helpful.
Thanks.
first of all define all urls in router that is
You can watch these two videos for complete routing part1 part2
You forgot to add
use browserHistory.replace('/location')
another thing is that dont include / in child routes for example use like this <Route path='submissions' component={Submissions} />
export default ( <Router history={browserHistory}>
<Route component={App}>
<Route path='/' component={Home} />
<Route path='/submissions' component={Submissions} />
<Route path='/location' component={Location} />
<Route path='/login' component={Login} />
<Route path='/dashboard' component={Member} />
</Route> </Router> );
You're probably more generically wondering how single page applications routing works.
There are endless resources about this subject on the web.
This is a reactish article I have immensely appreciated: https://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997
Index.js
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Component BrowserRouter wraps the history object in the browser and passes it to down to component tree. Anywhere in the component tree we are able to use the history object. Then we need to register our routes in app.js.
app.js
import { Route, Redirect, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<div>
<NavBar />
<main className="container">
<Switch>
<Route path="/not-found" component={NotFound} />
<Route path="/register" component={RegisterForm} />
<Route path="/login" component={LoginForm} />
<Redirect from="/" exact to="/home" />
<Redirect to="/not-found" />
</Switch>
</main>
</div>
);
}
}
export default App;
If we did not use the "Switch", react would read "/" first and since that route is returning homepage, every route would return homepage too. For example,
<Route path="/register" component={RegisterForm} />
this would return "RegisterForm" and homepage. With using "Switch" we have to order our routers from most specific one to the most generic one. Means “/” should be in the bottom.
Now we have an issue. Every time we navigate from one page to another, we will have http requests from server. All of the components are part of the bundle and already downloaded when app loads so there is no need to reload them. Instead of reloading entire page with all assets, we should only update what we have in the content area. Solution is all the anchors should be replaced with “Link” from react-router-dom. Link component doesn't have “href” attr instead has “to”. Every time we click on links, “Link” has a click event. It will preventDefault(). So lets create a simple button with Link:
import { Link } from "react-router-dom";
<div className="col">
<Link to="/products/new" className="btn btn-primary my-2">
New Products
</Link>
</div>
In the beginning I said BrowserRouter wraps the history object in the browser and passes it to down to component tree. So we access it by "Route". When we registered our routes, "Route" automatically injects "History, Location, Match" props into the components. If you need to pass additional props to routed components; instead of component attribute we should use render attribute.
<Route path="/products" render={(props) => <Products sortBy= “newest” {...props} /> } />
Note that If we didnt pass “props”, History,Location and Match would disappear.
When user clicked on a button or submit a form, we wanna navigate it to a different page.
“History” object is responsible for navigation: go back, go forward, push and replace
PUSH: push method will add a new address in the browser history, so you click the back button and you go back to where you were.
REPLACE:replaces the current address, so we will not have history.
handleSave = ( ) => { this.props.history.push ("/products"); };
we can read route parameters and passed them to a component using the “match” object.
So we can render this info in our ProductDetails page as below.
<div>
<h2> productDetails-{this.props.match.params.id} </h2>
</div>
Query string parameters are in “location” object.
having some problems with developing custom components in JSF. I am building a component which wraps some javascript generated charts (javascript appends SVG elements to specified div). They have some animations by the time they render. When some part of chart is changed, there is made modification for only part of the chart by calling some .js scripts (whole chart is not rendered again). So, the rendered component looks some like this:
<div> <--- master container
<span id="clientId" />
<script> .js script for chart generation </script>
<div id="chart">
<svg>...</svg> <--- generated by script
</div>
</div>
When is ajax render invoked with ID of this component, there is only span updated (so chart won't rerender). I catch the call, generate some modification script and return them to the client. Everything is ok.
The problem: when is updated some other component or container which holds this component with chart, the div "chart" is rerendered. Is there any server side way, how to exclude component to be updated?
Thanks
I'm using primeface timeline .first my timeline shows just loading then its displaying after I include code
<form prepenId="false" >
<p:timeline value="#{bean.value} />
</form>
.but my issue is the timeline shows just focus date in starting...and i cannot scroll or move content of timeline.the timeline is displaying just same content which s starting of my timeline (starting with focus date).but cannot move ...to left n right...cannot view others . ruler appears but its not moving the content of timeline.
It's available zooming and navigate on timeline component default on primefaces extension. Be sure that you use newest version of "primefaces-extension" component instead of old "primefaces" timeline component. Primefaces transferred development of timeline to primefaces extension. Send your all of your bean and facelts code please.
But there is an other way to set the options of original timeline plugin which framework use.
Set widgetVar attribute of timeline component:
<pe:timeline id="timeline" value="#{bean.events}"
eventStyle="box"
widgetVar="timelineWidget">
Then put or run this javascript on your facelet page:
<script type="text/javascript">
timelineWidget.jq.timeline(timelineWidget.cfg.dataSource,{"zoomable":"true"});
</script>
With this method, also you can set other properties which is javascript plugin support. Primefaces-Extension provide limited attributes of plugin.
Hope It'll help.