I am trying to create the possibility for a page to display itself so long as the data is there - I'm using WordPress REST API and the end user will be able to create pages for themselves that obviously won't appear in the Router as I can't possibly forsee all of the pages they will eventually want to create.
The way I'm trying to resolve this is to pass something of a wildcard into react-router (picture 1).
Picture 1:
So, in my understanding, if the user visited my site and put in /giraffe, it would take them to the <About /> component, and would put /giraffe in the pageSlug parameter. However, it puts :slug in that parameter.
When I use the React Dev Tools, I can see that there is an element between my <App /> (top level) component and my <About /> component with no name and has parameters - see Picture 2:
This has a component with the following information <component location={pathname: "/giraffe", search: "", hash: ""} params={slug: "giraffe"} /> etc. Is there any way that I can pass these params into the route?
Here is how I am returning my <About /> component - Picture 3:
This is the first time I've used React and React-Router, so I appreciate that this may be a stupid question or I may be doing this all wrong, however I've been trawling through questions and answers for a few hours and am none the wiser. I feel like I should be able to access those parameters, but no idea.
Help?
From the docs:
A route's component is rendered when that route matches the URL. The router will inject the following properties into your component when it's rendered.
params
The dynamic segments of the URL.
So if your route is defined as follows:
<Route path="/:slug" component={About} />
you could access this.props.params.slug to get the parameter value.
Related
So we want to create a big website with nextjs and strapi.
We sometimes have deep nested pages like
www.ourwebsite.com/onderwijs/bijbelscholen/parttime-bijbelscholen
How is this possible?
I have tried to setup dynamic routing in nextjs which is working fine, but I have a problem.
If I want dynamic routes which are all nested I need to do something like this:
I know it's ugly, I'm sorry.
so now when I go to
www.ourwebsite.com/onderwijs/bijbelscholen/parttime-bijbelscholen
I just get the latest word from the URL and take that and put that into my API to get the right data which is working fine! I configured strapi so it finds by slug and not by id. So my API URL looks like this: www.myStrapiInstalation/api/pages/parttime-bijbelschool
but when I go to
www.ourwebsite.com/onderwijs/parttime-bijbelscholen
It's also working! but that's not good! Because it needed to give me a 404 page because it doesn't exist but now it just takes the latest word and gets the data from strapi. My API URL is still this of course: www.myStrapiInstalation/api/pages/parttime-bijbelschool
So what do I need to do?
Is it just not possible to make everything hardcoded and do I need to make nested folders with real names like: 'onderwijs', 'activiteiten' etc.
Or can I make everything dynamic so that people can make nested routes in nested routes in strapi?
I feel like this is a very stupid question, but I'm really stuck here.
Next JS allows catch-all routes, which is useful for nesting pages and have this format:
pages/post/[...slug].js
In your example, the pages folder structure would be:
pages/secondNest/[...page].js
However, since you're using Strapi to fetch the content, the routes of these pages should be known in advance so that if the user navigates to an invalid page, the result should be 404.
You can set the valid routes in Next with getStaticPaths. But notice that you will also need to set up a custom controller in your Strapi application to return the content tree of your website the way that getStaticPaths expects.
That way, it's ok to use the last part of the URL to get the content.
One disavantage of using catch-all routes, though, is that you must know the base of each URL. For example, if you have the following URLs
www.example.com/onderwijs/bijbelscholen/parttime-bijbelscholen
www.example.com/activiteiten/bijbelscholen/parttime-bijbelscholen
the folder structure in pages would be:
pages/onderwijs/[...page].js
pages/activiteiten/[...page].js
The key factor here is that the paths following the base of the URL should be set statically with the help of a custom controller that returns the tree of the content.
I have an application which support multi languages and I want to translate accessibility props like "aria-label". In my case I'm using Next.js with next-i18next.
I created a namespace specifically for those translations (a11y)
<IconButton
aria-label={t('a11y:TogglePassVisibility')}
onClick={handleClickShowPassword}
edge="end">
{showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
The component is using HOC withTranslation from from next-i18next like:
export default withTranslation(['common', 'auth', 'a11y'])(SignUp);
But I got this message: Warning: Prop aria-label did not match. Server: "toggle password visibility" Client: "TogglePassVisibility". If I inspect DOM I can see that it is working but the warning persist.
Not sure if it is supported by the framework. I made my research but not luck so far.
Aria-label is a regular DOM attribute, you can translate it.
Since Next.js is a Server & client side renderer, from you error looks like your server side render is different from the client side.
There are many possible reasons for this, one of them is that the language in the server side is different from the one that is in the client side.
First off, I would like to know if my course of action seems reasonable.
I am trying to integrate React within a large ASP.NET Core project. This project is a traditional MVC application. I have been tasked with adding the functionality to incorporate React for a settings page.
The page consists of 4 other settings pages. I was thinking this would be a good opportunity to incorporate client-side rendering in order to route to each settings pages.
The setup is like this.
Once the application starts, the path looks like this:
https://localhost:3000/
Navigating to settings looks like this:
https://localhost:3000/settings
I want to be able to go further and route like this:
https://localhost:3000/settings/permissions
But I don't want to hard code the route "https://localhost:3000/settings/". The problem is that the application is utilizing a traditional MVC, and the way that the user actually navigates to the settings page is totally separate from the page with react on it. All of the examples for React Router 4 seem to operate under the assumption that I have access to the props that have stored the previous location already.
So basically, I want to know if there is a way that I can get the current location regardless of where the component is being rendered, so that I can use it as the relative path, where the relative path is the base route for the router (in this case the settings page)
Here is my implementation
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Settings from '../components/Settings';
import Permissions from '../components/Permissions';
ReactDOM.render((
<Router>
<div>
<ul>
<li>
<Link to="/">Settings</Link>
</li>
<li>
<Link to="/permissions">Permissions</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Settings} />
<Route path="/permissions" component={Permissions} />
</div>
</Router>
), document.getElementById('reactcomponentwithapidata'));
Try adding basename to your Router component with value /settings.
<Router basename="/settings">
{ /* ... */ }
</Router>
From the documentation:
The base URL for all locations. If your app is served from a sub-directory on your server, you'll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.
The problem is about how to maintain the content and state of an iframe in a component of Vue no matter the component is showing or hiding.
I tried two methods:
(1) using keep-alive together with vue-router
<keep-alive>
<router-view>
<Component></Component>
</router-view>
</keep-alive>
(2) take it as a sub component, using v-if to show and hide instead of vue-router
<Component v-if="$store.state.isShow"></Component>
both methods keeps the content of component but the iframe still refreshes every time, so is there any method to achieve just hiding and showing the iframe?
A similar question is Thomas question, he also uses the vue-router method and does not work out, I agree with the opnion of Thomas that Vue just keeps the content of component but not of iframe.
Thanks a lot!
If the sub component approach works for you:
<Component v-if="$store.state.isShow"></Component>
then a slight modification will keep the iframe from being refreshed on state changes:
<Component v-show="$store.state.isShow"></Component>
Note that this only works if the route remains unchanged.
If you actually need to use different routes, and if the only problem with refreshing the iframe is performance, you might be able to get away with loading the iframe contents via ajax and caching it in local storage.
I'm using a component called 'SearchComponent' in 2 routes. In the first route, the component is styled a certain way - for example there are 3 input texts that are display:block so they stack against each other. In the other route, I would like the 3 input texts to be inline-blocks.
The question is, can I use routing to conditionally change a components style?
I was hoping that the #Component decorator has some conditional logic capabilities but from my readings, it isn't possible. If that was the case, then I could just use a separate styleUrl path.
Can anyone help with this?
Have you considered using route params? You could use some variable in the routes as a condition for the styling. For example:
https://fooServer/fooApp/#/main/YourComponent;type=search1
Variable type here could be string, boolean, etc.. You would set it during the route change from the previous component.
Then in ngOnInit() you would call this._route.snapshot.params['type']; to grab the value in the route param. Then in the template, add to the tag [attr.class]="type == search1? search1Class : search2Class"
Info on route params can be found here under the 'Route definition with a parameter' header.
Let me know if I misunderstood your question :)