Not sure why, I need to close offcanvas after the user click on a <router-link> in my vue app.
I've imported the related component in this way
import { Offcanvas } from 'bootstrap/dist/js/bootstrap.esm'
And inside my methods I've created a method that will be called from the router link
closeOffcanvas() {
const offcanvasMenu = new Offcanvas(this.$refs.offcanvasNavbar)
console.log(offcanvasMenu)
offcanvasMenu.hide()
},
<li class="nav-item">
<router-link class="nav-link" :to="userProfileURL" #click="closeOffcanvas">Profilo</router-link>
</li>
I've tested the data-bs-dismiss="offcanvas" but this will prevent the navigation to the requested route.
Any suggestion or tip to fix this?
Related
I am new to working on the frontend. I'm learning how to use React and react-router-dom library. The program renders without a problem normally. The problem lies when I try to add a Link component from the React library. When I do this, the DOM is no longer displayed.
import React from "react"
import {Routes, Route, Link} from "react-router-dom"
import Mflix from "./components/mflix.js"
function App(){
return (
<div className="App">
<nav className="navbar navbar-expand navbar-dark bg-dark">
<a href="/mflix" className="navbar-brand"> {/*href links to "/mflix" route */}
Mflix Reviews
</a>
<div className="navbar-nav mr-auto">
<li className="nav-item">
<Link to={"/mflix"} className="nav-link">
Movies
</Link>
</li>
</div>
</nav>
</div>
)
}
This SO forum has a similar problem, except they created a class for their app, and I'm trying to keep it as a function for now.
If I replace the code:
<Link to={"/mflix"} className="nav-link">
Movies
</Link>
with
<a href="/mflix"m className="nav-link">
Movies
</a>
The DOM renders fine, buT I want to use Link because it doesn't force my page to refresh every time.
Edit: I read that instead of passing a JS expression to the to <Link to{"/mflix"}/> I should pass a string <Link to"/mflix"/>. However, the documentation says that if the link uses a path name, then it should be passed to to= as an object, and not a string. IN any case, I tried the suggestion, but the code still returns a blank page.
Edit: This is what the web console has to say about the component:
he above error occurred in the <Link> component:
LinkWithRef#http://localhost:3000/static/js/bundle.js:37314:9
li
div
nav
div
App#http://localhost:3000/static/js/bundle.js:40:72
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Whenever the DOM disappears, there is an issue in your code. I'm guessing it has to do with this "Mflix" import. Bring up the console and see what it says.
I dynamically created sidebar navigation list using router-link.
<template>
<div class="sidebarListItem bg-light">
<router-link
v-for="route in $router.options.routes"
:key="route.path"
:to="route.path"
class="list-group-item list-group-item-action bg-light">
{{route.title}}
</router-link>
</div>
</template>
<script>
export default {
name: "PageSidebarList",
computed: {
routes(){
return this.$router.options.routes
}
},
}
</script>
Each router-link is one map.
But then, I need to use <router-link> in some other place in my app, so I need to register new view (map) in router.js. The problem is I don't want this one view to be in sidebar list and it is automatically because of my code. I tried to separate routes in different files(one that I need for list and the rest of the views) and then importem them in router.js. but still it does't work. Or I don't know how to call them separatelly. I am new to vue and vue-router so please help. Is it possible to do what I want?
It's possible to add custom meta data to each route:
{
path: '/foo',
component: Foo,
meta: { hideInNav: true }
}
And then you can use a v-if on the router-link v-if="!route.meta.hideInNav"
Basically I'm trying to remake some simple web page that I have initially created with HTML and CSS to be working rather on React. I managed to redo the page to correctly display when it was moved into React, however I don't really understand why the navigation links that I have on top do not take me to the corresponding section on the same page anymore as well as why the external links to the project sites also stopped working.
Here is the project link code:
import React from "react";
export default function ProjectTile(props) {
return (
<div className="project-tile" id={props.id}>
<a href={props.href} target="_blank" id={props.link_id}>
<img
className="project_screenshot"
src={props.img_src}
alt={props.img_alt}
/>
<p className="project_name">
<span className="brackets"><</span> {props.title}{" "}
<span className="brackets">/></span>
</p>
</a>
</div>
);
}
All props are getting mapped and loaded from the array with corresponding data where each object looks like this:
{
id: "tribute_page",
link_id: "https://codepen.io/konstantinkrumin/full/PooYQbG",
img_src: "https://i.imgur.com/ynRuzOQ.png",
img_alt: "tribute_page_screenshot",
title: "Tribute Page"
}
The navigation links used are the following:
import React from "react";
export default function Navbar() {
return (
<nav id="navbar">
<a className="nav-link" href="#welcome-section">
About
</a>
<a className="nav-link" href="#projects">
Projects
</a>
<a className="nav-link" href="#contact">
Contact
</a>
</nav>
);
}
And each section they refer to have an id corresponding to the href indicated above.
Here if the link to this project on codesandbox
P.S. Everything used to work correctly when it was on HTML.
Also the contact links that seem to be set in similar way as project links are working.
Here are two things I think I found out:
In the ProjectTile.js file, replace href = {props.href} by href={props.link_id and now project opens in codepen.
About the jump link you have made in nav-bar, I think it's because of problem of codesandbox.
If you manage to make your url to https://op6gq.csb.app#projects instead of https://op6gq.csb.app/#projects. That's gonna work.
Or directly visiting https://op6gq.csb.app/#welcome-section jump link too works well.
It looks like there's no href prop. Sounds like what you want is something like
href={`#${props.id}`}
which would evaluate to href="#tribute_page" in this example.
You Have to try that your page url become:
https://op6gq.csb.app#welcome-section
Not:
https://op6gq.csb.app/#welcome-section
please attend to that / in address bar!
Im looking to run a function that corresponds with each router link with that has the default class 'router-link-active'.
For simplicity I would like to replicate basic CSS class/style change for each active link using Javascript or Vue.js Directives.
CODEPEN
<router-link to="/1" class="link ROUTER-LINK-ACTIVE">one
<span style="change this within function when active"></span>
</router-link>
thank you for any insight )
I've got this working, but I'm sure there's a better way to do this in Angular. Essentially I've the following:
Assume nested, inflected paths, e.g. /logos and /logo/:id
I have the following markup, which works:
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" links="logo" routerLink="logos">
Logos
<span routerLink="logo" hidden></span>
</a>
</li>
This will properly cause the tab to activate on /logo/:id, however that span in there feels really hacky and incorrect. If the paths are not inflected, e.g. /logo and /logo/:id or /logos and /logos/:id it works fine. Do I just add another router link? Should I add some other directive? Do I need to go custom?
Thanks!
As your router is setup like this; (assuming logos is after the root, i.e. /logos)
{
path: 'logos',
component: LogosComponent
},
{
path: 'logo/:id',
component: LogoComponent,
}
There's only two types of links you need to have:
Link to all the logos:
<a routerLink='/logos'>All Logos</a>
Link to a single logo:
<a routerLink='/logo/specific-logo'>Specific Logo</a> , where "specific-logo" is the ID of the logo you want to go to.
If you want to have /logos seem active while you are in the /logo/specific-logo directory, I don't think it's possible (except for the workaround you found). However, you can simulate it using a computed value, i.e.:
<a class="nav-link" [class.active]="logoRouteActive" links="logo" routerLink="logos">
Logos
</a>
import { Router } from '#angular/router';
// ...
constructor(private router: Router) { /** ... */ }
get logoRouteActive(): boolean {
return this.router.isActive('/logo', false) || this.router.isActive('/logos', false);
}