Develop Reference

DOM disappearing when replacing anchor tags with React Link components

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.

In VUE 3, how to insert a HTML code containing #click event to a already rendered page

I have a VUE3 application with Django (Python) in the backend. I am trying to add a "div" to a DataTable cell with Javascript. See the code below:
let myTable = $('#dtBasicExample').DataTable()
myTable.cell(vm.table_index, 12).data(`
<div class="d-flex justify-content-around mx-1">
${vm.counter_selected}
<a #click.prevent="unapplyCounter(index, part_number)"
class="text-danger"
id="assign_counter">
<i class="fas fa-backspace"></i>
</a>
</div>
`)
As you can see, the "a" element has a Vue #click event in it.
When this code is added to the page, it shows as an attribute, and VUE does not detect it. The screenshot below shows how the HTML is right after the code above is applied:
What am I missing in order to make VUE3 recognize the #click event?

Nextjs Router.push vs href

For Routing to some page on click, I can achieve it in two ways
import Router from 'next/router'
<button onClick={() => Router.push('/about')}>
<a>Go to About</a>
</button>
And
<button>
Go to About
</button>
Which one is the best practice in Nextjs?

a tag inside button is not allowed in semantic html, both of them are interactive elements.
For links, Next provides Link component that accepts a tag as a child.
For buttons, use <button onClick={() => Router.push('/about')}>text</button> without a.

The best way to create links between pages is to use your nextjs package.
import Link from "next/link";
Then use it like that
<Link href={'/'} params={'id': 1}>
<a>link</a>
</.Link>
if useing node js router href linked by name route

For the best user experience I would suggest a third option / best practice:
import Link from "next/link";
<Link href={"/within/your/page"} passHref>
<button>go</button> // or any other element
</Link>
pre NextJS 10 if your path had dynamic segments you would need to pass "as" also like:
import Link from "next/link";
<Link href={"/review/[id]"} as={"/review/12"} passHref>
<button>go</button> // or any other element
</Link>
The Link Component / the router.push enables client side navigation. This makes navigating your website a lot faster.
you can read more on this here:
https://nextjs.org/docs/api-reference/next/link
https://nextjs.org/docs/api-reference/next/router

Vuetify buttons in vue-social-sharing of nuxt application

I'm trying to implement this - https://github.com/nicolasbeauvais/vue-social-sharing in my nuxt (+vuetify) application.
I've created a file - vue-social-sharing.js in plugins folder:
import Vue from "vue";
import VueSocialSharing from "vue-social-sharing";
Vue.use(VueSocialSharing);
included them in nuxt.config.js
plugins: [
"#/plugins/vuetify",
"#/plugins/vue-social-sharing.js"
],
I'm trying to beautify the buttons with Vueity (this works fine - https://jsfiddle.net/menteora/evydLj65/1/)
<social-sharing url="https://vuejs.org/"
title="The Progressive JavaScript Framework"
description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
quote="Vue is a progressive framework for building user interfaces."
hashtags="vuejs,javascript,framework"
twitter-user="vuejs"
inline-template>
<div>
<v-btn><network network="email">
<i class="fa fa-envelope"></i> Email
</network></v-btn>
<v-btn><network network="facebook">
<i class="fa fa-facebook"></i> Facebook
</network></v-btn>
</div>
</social-sharing>
But I'm running into the below errors:
[Vue warn]: The client-side rendered virtual DOM tree is not matching
server-rendered content. This is likely caused by incorrect HTML
markup, for example nesting block-level elements inside <p>, or
missing <tbody>. Bailing hydration and performing full client-side
render.
[Vue warn]: Unknown custom element: <v-btn> - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
I think it is an issue with configuration, v-btn is not available with social-sharing is being rendered, please suggest.
Thanks

I haven't installed those, but I can almost bet that the fact you are wrapping network components with a button is a problem.. Because the markup that it generates most likely looks like this:
<ul class="networks">
<button>
<li></li>
</button>
</ul>
Have you tried to replace this markup with:
<social-sharing>
<div>
<network network="facebook">
<v-btn><i class="fa fa-fw fa-facebook"></i> Facebook</v-btn>
</network>
<network network="facebook">
<v-btn><i class="fa fa-fw fa-twitter"></i> Twitter</v-btn>
</network>
</div>
</social-sharing>

How can I configure facebook plugin for vuejs with slots

I need to integrate facebook plugin into my vuejs application. I wanted to use
vue-facebook-login-component plugin but I am confused at some points. I can not change text, it doesnt have a text prop, instead it has a text slot. And their slot example doesnt have a api-id which needed for facebook login.
They have to slot example but I could not understand how to use it, never used slot before. I searched google but still can not make it.
When I used in my code, slot-scope="scope" gives scope is defined but never used error, so my first question is how will I use it ?
Another issues is, in slot example it doesnt have app-id, I confused where to put id when I use slot, and how to get login-logout information.
this one works but I can not change login/logoutworking texts.
<v-facebook-login app-id="966242223397117"></v-facebook-login>
this is the example with slot given on the plugin page
<template>
<v-facebook-login-scope>
<button slot-scope="scope">
<!-- Compose HTML/CSS here, otherwise nothing will be rendered! -->
</button>
</v-facebook-login-scope>
</template>
and this is my original button code where I want to integare facebook login. How will I use his code in above code-with-slot ? and where will I put app-id ? Here it is a more detailed code with slot from the plugin and it doesnt have api-id either.
https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.vue
<v-button
class="gray fw shadow-none login-box__submit"
title="FACEBOOK İLE GİRİŞ YAP"
/>
so what I tried is directly putting my button inside of it (just giving class doesnt work)
This brings button with my button class but stays connecting and never bring login
<template>
<v-facebook-login-scope>
<button slot-scope="scope">
<!-- Compose HTML/CSS here, otherwise nothing will be rendered! -->
<v-button
class="gray fw shadow-none login-box__submit"
title="FACEBOOK İLE GİRİŞ YAP"
/>
</button>
</v-facebook-login-scope>
</template>

Try this
<v-facebook-login app-id="966242223397117">
<span slot="login">FACEBOOK İLE GİRİŞ YAP</span>
</v-facebook-login>