I have a site.
http://example.com
On my site I have multiple languages which get appended to the url.
So the homepage becomes something such as
http://example.com/english
When the user navigates to the account section, it is a React single page app with React Router
http://example.com/english/account
On this account section, there are multiple tabs that load different templates
http://example.com/english/account/login
http://example.com/english/account/create-account
Now the 'english' part of the url could be any language (french, german, spanish). How would I set up my React routing to account for this dynamic part of the url? I ultimately want to do something with a wildcard effect, but this doesn't seem to work
<NavLink className="nav" to="/*/account/login">
<div>
<h5>Login</h5>
</div>
</NavLink>
Adding explicit values such as
/english/account/login seems to work. But I'd rather not hardcode every language
You can use props.match.url for creating relative urls.
<NavLink className="nav" to={this.props.match.url}+"/account/login">
<div>
<h5>Login</h5>
</div>
</NavLink>
Related
I have a left section containing a mini navbar (buttons: users, create, coins) and a right section containing the content I want to display (display coins section when coins button is clicked, ...)
However currently, the routing I want to achieve is not what I want at the moment.
When for example, the users button is clicked, I want the routing/url to be shown as settings/users, rather than just settings, settings/create for the create button and settings/coins for the coins button.
The following is the code:
settings/+page.svelte
<script>
import { page } from '$app/stores'
import Create from './create/+page.svelte'
import Users from './users/+page.svelte'
import Coins from "./coins/+page.svelte"
export let data
let loading = false
let currentSetting = 'create'
$: currentSetting = $page.url.hash?.substring(1) || 'create';
</script>
<div class="flex mt-5 h-full">
<!-- Left section -->
<div class="flex flex-col items-center gap-4 w-44">
Create
Users
Coins
</div>
<div class="divider divider-horizontal"></div>
<!-- Right section -->
<div class="flex-1">
{#if currentSetting==='create'}
<Create categories={data?.categories}/>
{:else if currentSetting==='users'}
<Users bind:loading={loading} users={data.allUsers}/>
{:else if currentSetting==='coins'}
<Coins bind:loading={loading} users={data.allUsers}/>
{/if}
</div>
</div>
where coins, create and users are all components in settings/coins/+page.svelte, settings/create/+page.svelte and settings/users/+page.svelte respectively.
When a button is clicked, currentSetting changes such that the display changes to the correct display (users button clicked, displays users settings.
I have tried using a pseudo route for each component, but I do not want to use it as it cannot have its own +page.server.js.
Thus, changing the link of a anchor tag is needed.
I was thinking of using slug, but I'm unsure of how to actually use it.
I believe you are confusing pages and components.
In SvelteKit, pages are placed under /src/routes/ in a hierarchy that mirrors your desired URL paths to access each page. SvelteKit will then infer the routing from that /src/routes/ directory structure. This is where you will define +page.svelte, +page.js, etc. files for page declarations, +layout.svelte etc. files for layouts, +server.js files for endpoints, etc.
You do not need to import pages in order to link to them, you simply use the standard HTML ... tag with the correct URL to reach the page you want linked to. For instance, a page declared as /src/routes/settings/users/+page.svelte will be, by convention, accessible on your site at yoursite.com/settings/users and can be linked to with Users.
You can read about SvelteKit routing in detail here.
In addition to pages, you can also create components, which are like reusable building blocks for your pages. These are typically placed under /src/lib/ and have names like MyForm.svelte. These components will have to be imported in your page files before you can use them there.
You can find a typical SvelteKit project structure here.
Complementary information: using layouts
Layouts are part of the /src/routes tree and help define common structural elements shared by several pages.
Layouts usually apply to all the pages that are located below them in the /src/routes/ directory hierarchy, although there are special mechanisms available to escape individual page files from using layout(s) that would normally apply to them.
Layouts can be nested. In your particular use case, for instance, you would want to locate your side navigation in /src/routes/settings/+layout.svelte. This is what it that file would look like:
// /src/routes/settings/+layout.svelte
<script>
export let data; // from the layout's load() function, see further below
$: current = data.route.id
</script>
<div class="flex mt-5 h-full">
<!-- Left section -->
<div class="flex flex-col items-center gap-4 w-44">
Create
Users
Coins
</div>
<div class="divider divider-horizontal"></div>
<!-- Right section goes here -->
<div class="flex-1">
<slot></slot>
</div>
</div>
And the accompanying /src/routes/settings/+layout.js:
// /src/routes/settings/+layout.js
export function load({ route }) {
return { route };
}
The above load function will simply get the name of the route from the incoming request and pass it on to the layout (and its child pages). You need this in order to properly set the btn-active class in your side navigation for the currently active page.
With the layout defined above, any pages declared under /src/routes/settings/ will apply this layout and be loaded into the <slot></slot> declared in the layout.
You can read more about SvelteKit layouts here.
Note that all of this is really the A-B-C of SvelteKit. I urge you to go back to the docs to get a solid grasp of a SvelteKit project structure and a thorough understanding of its routing/page structure conventions.
Can't see a way in V6 to dynamically add an external link without the router prepending the site URL. Just need to do something like this:
<a href={dynamicStrValue} target='_blank' rel='noreferrer'>Link</a>
What about:
<Link to={{ pathname:`https://example.com/${dynamicStrValue}`}} target="_blank">My link</Link>
Referring to their docs
<Link to> with a .. behaves differently from a normal when
the current URL ends with /. ignores the trailing slash, and
removes one URL segment for each ... But an value handles ..
differently when the current URL ends with / vs when it does not.
Your link must include the protocol to avoid RR prepending the site url.
I was having the same problem as you, when executing an external component using a plain anchor tag it was redirecting to the router, instead of opening a blank page.
The solution to my problem was simply removing the key param in the anchor tag as follows
<a key={item.key} href='{item.url}' target='_blank'> {item.title} <a/>
to
<a href='{item.url}' target='_blank'> {item.title} <a/>
Sorry to disturb, guys. I'm so new to react and react-router and I've been struggling for few days already.
Actually I am trying to pass some values before jumping to a new page (using Link attribute target="_blank") and in the new page, I want to use these values to communicate with the server and when the data from the server comes, the new page will load its content.
the route path is something like this
<Route path="/root/the_page" component={the_component} />
and the link will be like this:
<Link to="/root/the_page" target="_blank" />
What I have checked is this discussion about using a function to pass the value, but I really cannot re-produce it. As for the query-params, I cannot retrieve the query in this.props.location even I set the link as follows:
<Link to={{pathname:"/root/the_page", query: {the_key: the_value}}} target="_blank" />
Any advice will be helpful.
Thank you in advance!
I don't see any reason why you would want to use React-Router to navigate to an external page. React-Router is meant for navigation in single-page applications but opening a link with target="_blank" would mean leaving that single-page app and opening new window/tab.
As such, why not just use a regular anchor tag? That's perfectly viable for external navigation.
Click me
Obviously, your history object won't be carried over because you are opening a new window/tab - so you won't be able to go "back" or do any of that.
Check this codepen (click on users submenu item). The new window is opened with params.
<Link to={{pathname: "/users", query: { someParam: 'someValue' }}} target="_blank">Users</Link>
https://codepen.io/Kotuhan/pen/JOJzNY
Then, you can get your params from window.location.search string.
I'm wondering how I can have my LinkContainer/NavItem link to an external URL. I tried:
<LinkContainer to="https://www.example.com">
<NavItem eventKey={1}>LinkedIn</NavItem>
</LinkContainer>
In which case I get the error:
A path must be pathname + search + hash only, not a full URL
I've also tried:
<NavItem eventKey={1} href="https://www.example.com"></NavItem>
The above yields no error, but doesn't do anything.
Using the Link from react-router commented by #yussan, you can add a target value and it should work. I'm using it to link external social networks, like this:
import { Link } from 'react-router'
<Link to="https://facebook.com/mypage" target="new">Facebook</Link>
I know its an old thread, but I faced this issue today and wanted to share the solution.
You'll probably be able to do something like this:
<Link to="https://www.example.com" target="new">
<NavItem eventKey={1}>LinkedIn</NavItem>
</Link>
Hope it helps,
that component is based on react-router Link https://www.npmjs.com/package/react-router , and only used to transition within website.
for example : /people /people/id
if you want create direct link to other website, you have to create own link component with a href.
It might sound a bit complicated.
This is SinglePage, pushState enabled application. I have a route, for configuration:
routes: {
'': 'dashboard',
'configure/sites/:id': 'configure',
'configure/sites/:id/:section': 'configureSection'
},
I'm using tbranyen/backbone-boilerplate way to navigate the urls. If I click a href from a dashboard a href="configure/sites/33, view rendered fine. In browser URL I can see, `localhost:12345/configure/sites/33'.
On configure view I have a menu, with some <a href= inside.
<ul class="nav configure-nav">
<li>
Overview
</li>
<li>
Configuration
</li>
The problem is, if I try to hit those links, the id goes away.
Expected href: http://localhost:12345/configure/sites/33/configuration
Actual href: http://localhost:12345/configure/sites/configuration
Could you please explain what happening and how to fix it?
I don't know if this will fix your problem but if you're making a single page app, you should put a hashbang after "localhost:12345/" or all those requests will get sent to the server.
This is due to the way relative and absolute links work. In your case the hrefs are relative to the closest "directory" in your path (to keep the file system analogy the :id part can be seen as a file).
If you add a trailing slash to your routes the overview and configuration links will be rooted properly.