How to access abstract current path in react-router v4 - javascript

Using react-router v4, how should I go about getting the current abstract path. For example, I can access this.props.location when using withRouter(...) but this gives /students/19, when I want students/:id etc. This functionality is desired for a logging tool.
How should I accomplish this?

Use this.props.match.path. I believe that's what you need.

Related

Alternative to the DependencyGraph component within Backstage

In an application called Backstage, there is a component that I have found called "DependencyGraph" which I like the look of and want to use something similar in my react app: https://backstage.io/storybook/?path=/story/data-display-dependencygraph--bottom-to-top.
Does anyone know of something similar to this which I could install and use within my own react app such as an existing package or something?
I can see the DependencyGraph component basically builds an svg diagram based on the different "nodes" and "edges" you give it but hopefully there's an easier way to do it than creating my own custom component to render svg images with paths, etc...
I've tried installing the #backstage/core-components module which contains the DependencyGraph component but the react version it uses is outdated. I also don't want to install everything else that comes with the #backstage/core-components package.

How can i use React server components

i want to try new React api calls server components. I don't find any information about how can i start project with server components. In source code example i find
react-server-dom-webpack/plugin
must i use it? and why we need it in all which use server components? I found it here - https://github.com/reactjs/server-components-demo/blob/main/scripts/build.js
it doesn't have any documentation on npmjs.
Can i just add .server.jsx prefix to my component and start use them?

How to initialize a library in react-native

I'm trying to work with this react-native library, and in the documentation it says this:
Initialize Library
Somewhere high up in your project and way before calling any other method exposed by this library, your index file or equivalent is a good spot, ensure you initialize the library with your public key as follows:
import RNPaystack from 'react-native-paystack';
RNPaystack.init({ publicKey: 'YOUR_PUBLIC_KEY_HERE' });
How do I do this, without getting null object is not a function.
In my app.js I tried it with useEffect, tried with componentwillmount , tried several ways, same error.
I feel I'm doing it wrongly.
Can someone tell how to initialize a library properly in react native.
Thanks :)
This is most likely happening because you haven't linked the native modules properly. That's expected as you mentioned you're using Expo, which doesn't allow you to add custom native code. If you want to use this library, you'll have to eject from Expo. See the docs.

Generate components in sub-folders in ember/ember-cli

Based on recommendations for the preparation for Ember 2.0...
• In general, replace views + controllers with components
• Only use controllers at the route level...
...we're supposed to eschew Controllers and Views in favor of Components. I haven't been able to figure out and/or understand how to generate Components that aren't direct parents of the components folder, i.e. components/component-name.js.
My current controllers folder looks something like:
/controllers
/account
index.js
edit.js
/business
index.js
Basically, there are sub-folders that group logic based on the sections of the application. How do I accomplish this with just components?
Seeing that components must have a "-" in them, I tried, but get an error...
ember generate component account/index-module.js
You specified "account/index-module.js", but due to a bug in Handlebars (< 2.0) slashes within components/helpers are not allowed.
Do all components have to be like
components
account-index.js
account-new.js
business-index.js
i.e. all in the same folder? This will start to get out of hand with the addition of what I actually consider to be components (things like video-viewer.js, text-editor.js, radio-button.js).
I would really like to have components in sub-folders, but unsure how to do this.
components
/media
/audio
audio-player.js
/video
video-player.js
/text-editing
text-editor.js
editor-toolbar.js
My components folder is already gross and I just got started:
Is it okay to leave the account/business logic in Controllers (seeing that it does say you should only use controllers at the Route level)?
I'm really confused about this "all components, all the time" convention.
Ok, so I had the same problem and as of ember 1.9-beta.3 (that's the version I tested). It is possible to have components nested under resource directories.
That means that you can have a "user" route or resource. And let's say you have a component which you only want to use with the user resource, so you want to put the component under the resource directory.
The way to do it is to put the component under the resource directory app/pods/user/component-name/template.hbs. The important part is to remember that components must have a dash in their name. It can't be just .../user/component it has to be .../user/component-name with a dash. Then you can use the component as {{user/component-name}} in your templates.
Also I think this is only possible when you're using the pod structure.
Ok, I think this question/answer needs a bit of an update for 2019. I have been using Ember for all of about a month, and my components folder has already become a pigpen. And the tutorial and main API docs don't really cover how to organize your components.
So I did a search of course. And the only answers I could find (like this one) are from around 2014-2015, and don't reflect modern Ember. I was about to accept my fate when I found this in the Ember syntax conversion guide.
(Note to the Ember folks: This is an important issue, one that almost every new user will encounter. It should feature a bit more prominently in the documentation. Maybe not the tutorial, but definitely in Components section)
You can in fact generate components under a sub-folder in Ember as such:
$ ember generate component foo/bar-baz
installing component
create app/components/foo/bar-baz.js
create app/templates/components/foo/bar-baz.hbs
installing component-test
create tests/integration/components/foo/bar-baz-test.js
So that's great, the files are created under components/foo and templates/components/foo. And to resolve the name of the component for use in another template, you can use either the old style syntax:
{{foo/bar-baz }}
Or the new style angle bracket syntax:
<Foo::BarBaz />
As the assertion suggests this is due to Handlebars 1.x, and will be available soon.
Ember 1.9 beta builds currently support this, though I'm not positive if ember-cli's resolver would work with it right now. You can read more about Handlebars 2.0 here.
Using a pods structure will also help with organization, and I believe is going to be the recommended strategy going forward.
For now, I'd suggest not to worry about it! Remember the transition plan will be smooth, and as the official releases come out for Ember and Ember CLI, you'll get deprecation warnings.

Displaying fancy routes in cloudmade based service

I look for a way to display a route in a fancy way using the Cloudmade service.
Currently, I can see computed routes like on this tutorial http://developers.cloudmade.com/projects/web-maps-lite/examples/routing, but I look for a fancier way to do it -- without A and B tags, and with colors, etc.
Is this possible ?
Thanks for your help
Rob
Currently this is not possible unfortunately, the only way to do this is to use the NavEngine API directly and process the JSON responses manually. But we will think about making the CM.Directions class more configurable in future releases, thanks!

Categories

Resources