I'm using AntDesign component Anchor, with React Router. An error popped up saying
Identifier 'Link' has already been declared (77:8)
I understand that the Link has been declared twice, once for React Router, and the other for AntDesign's Anchor. Is there a way to circumvent this? I need both. The React Router is for routing, and the AntDesign's Anchor is for jumping to different sections on a page.
Here's the setup:
import React from 'react'
import { Link } from 'react-router-dom';
import Anchor from 'antd/es/anchor';
const { Link } = Anchor;
const View = () => {
return (
...//some code here
<Link to={{pathname: `/tutorial/${item._id}`}}>Item A</Link>
...//some code here
<Anchor affix={true} showInkInFixed={true} offsetTop={30}>
<Link href="#a" title="A"/>
<Link href="#b" title="B"/>
<Link href="#c" title="C"/>
</Anchor>
...//some code here
)
}
export default View
Either with the as keyword for the import e.g.
import { Link as Link1 } from 'react-router-dom';
or remove const { Link } = Anchor; and use Anchor.Link.
Related
The code down below shows my work in react, where i freshly startet my project and i am still pretty new in this kind of area. I have one simple question that i am just cant comprehend. Its probalby something simple. I expected the h1 with the text Hi too get rendered or to get foo as output, but my website isnt showing any text at all
App.js
import './App.css';
import Navbar from './Components/Navbar';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom'
function App() {
return (
<div className='App'>
<h1> Hi </h1>
<>
<Router>
<Navbar/>
<Routes>
<Route path='/' exact/>
</Routes>
</Router>
</>
</div>
);
}
export default App;
Navbar.js
import './Navbar.css';
import React, {useState} from 'react'
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav className='navbar'>
<div className='navbar-container'>
<Link to="/" >foo</Link>
</div>
</nav>
)
}
export default Navbar;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
After further testing it has shown that when i delete everything in the return function of App.js except the h1 Hi gets rendered.
I am gussing probably this is the issue. You are using React <18 and trying to use createRoot which is not there.
Change
//Don't use below because it's in React 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
to
let rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
Here is working example https://stackblitz.com/edit/github-pagkyw
The code is working properly now. The issue was that i installed react-router-dom one folder above the normal rreact app so that i had two seperate package.json files. I've uninstalled react-router-dom and reinstalled it in the same folder of the react folder. The json files got merged and then it worked after reloading
Im trying to use InputMask from PrimeVue in project on Vue3
I have block in template tag:
<div class="sdf">
<label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div>
and i have script:
export default {
data: () => ({
val1: null,
})
}
Everything seems okay, and console doesn't show any errors, but still, input is not visible, only label is shown. What do i do wrong?
It sounds like you didn't register InputMask.
You could register it globally with app.component('InputMask', InputMask):
// main.js
const { createApp } = require('vue')
import PrimeVue from 'primevue/config'
import InputMask from 'primevue/inputmask'
import App from './App.vue'
createApp(App)
.use(PrimeVue)
.component('InputMask', InputMask)
.mount('#app')
demo
I run React Native using Expo for android and I'm trying to render html file (it shows a map image) in local directory, but it doesn't work properly.
I followed several references, installed webview dependencies in expo and npm both.
The problem is that the result is just html code view, not a map image
Please see my result below:
And my react native code is this (very simple) :
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
const testHtml = require('./arcgis/arc1.html');
export default function App() {
return (
<WebView source={testHtml} startInLoadingState
scalesPageToFit
javaScriptEnabled
style={{ flex: 1 }}/>
);
}
When I compile the html file in online html website, it appears like this:
left - html code, right - result
This html file is just sample file from official gis website so my react native code must be wrong I guess.
How can I fix the problem ?
Thanks.
You have to use this module for rendering html.
https://github.com/archriss/react-native-render-html
Edit: Instead of using HTML file store your HTML into a .js file and export like this
export const MyHTML =
`<p>Here is an <em>ul</em> tag</p>
<ul>
<li>Easy</li>
<li>Peasy</li>
<li><div style="background-color:red;width:50px;height:50px;"></div></li>
<li>Lemon</li>
<li>Squeezy</li>
</ul>
<br />
<p>Here is an <em>ol</em> tag</p>
<ol>
<li>Sneaky</li>
<li>Beaky</li>
<li>Like</li>
</ol>
`;
and then pass MyHTML to yoru HTML renderer.
If you are using react-native CLI, you have to place the local HTML file in specific folders native to ios and android. Meaning you will have two indez.html file: see - https://aboutreact.com/load-local-html-file-url-using-react-native-webview/
For Expo, I used this method:
import { StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";
import React from "react";
const MyHtmlFile = `
<p>Here is an <em>ul</em> tag</p>
<ul>
<li>Easy</li>
<li>Peasy</li>
<li><div style="background-color:red;width:50px;height:50px;"></div></li>
<li>Lemon</li>
<li>Squeezy</li>
</ul>
<br />
<p>Here is an <em>ol</em> tag</p>
<ol>
<li>Sneaky</li>
<li>Beaky</li>
<li>Like</li>
</ol>
`;
const Screen = () => {
return (
<WebView
originWhitelist={["*"]}
source={{
html: MyHtmlFile,
}}
/>
);
};
export default Screen;
const styles = StyleSheet.create({});
You can use react-native-webview for rendering html file.
Here is an example
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
const myHtmlFile = require("./my-asset-folder/local-site.html");
class MyWeb extends Component {
render() {
return (
<WebView source={myHtmlFile} />
);
}
}
I'm using Angular Router and I'm trying to link to a sub-component in another route by id. Basically what would usually be done using the <a href="www.url.com/profile/#profile-header-id">.
I'm not sure if there's a built-in way for the Angular router to do this, but if not perhaps I can manually trigger the link at a later point when I know the element has been rendered.
The issue isn't linking to another route which of course is done with the Link from the Angular router. The issue is linking to an element which is found in the rendered HTML of the linked component.
Less Abstract Code Example:
So let's say my router in the app.module.ts file is
`const routes = [
{ path: '', component: HomeComponent},
{ path: '#section3', component: HomeSection3Component},
{ path: 'B', component: BComponent},
];`
Now in component OtherComponent, I want a Link that not only takes me to the home page route ' ', but also scrolls to the element of id #section3, thereby skipping all the irrelevant stuff.
My home component has nested components for each one of the sections of the page. Each section/component has an id.
home.component.html
`<main>
<app-section1></app-section1>
<app-section2></app-section2>
<app-section3></app-section3>
</main>`
However, all I can see is a blank page when clicking the button <button routerLink="#section3">Go to homepage section 3</button> on the B page.
The most elegant solution is just to add a fragment property to add the #section3 to the URL and then make it jump to this section with an anchor tag.
<div [routerLink]="['']" fragment="section3">
Jump to 'Section3' anchor
</div>
Use the routerLink directive combined with its fragment input property.
<a routerLink fragment="section3">Section 3</a>
With your routes, the rendered DOM is
Section 3
Make sure that you have imported RouterModule in the declaring module of the component in which you use the routerLink directive. Example:
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
#NgModule({
declarations: [
HomeComponent,
HomeSection1Component
HomeSection2Component,
HomeSection3Component,
],
imports: [
CommonModule,
RouterModule,
],
})
export class HomeModule {}
I'm using Reactstrap and React-router 4.0.0-beta.6 in the educational project that is located on gitlab with custom domain.
According to Reactstrap docs: that's the way I should use active navlink
import { NavLink } from 'reactstrap'
...
<NavLink href="#" active = true >Link< /NavLink>
According to React-router v4 docs:
import { NavLink } from 'react-router-dom'
...
<NavLink to="/about" activeClassName="active">About</NavLink>
So how should I do implement navlink active state and use react-router?
To use both, you'll need to rename one of those imports and use the tag prop in reactstrap NavLink. You won't be able to use the active prop on reactstrap NavLink because that logic exists in react router NavLink.
Here's what it should look like:
import { NavLink } from 'reactstrap';
import { NavLink as RRNavLink } from 'react-router-dom';
<NavLink to="/about" activeClassName="active" tag={RRNavLink}>About</NavLink>
More info here: https://github.com/reactstrap/reactstrap/issues/336
By default active class is used. You can simply use exact boolean property to match the exact path.
import { NavLink } from 'reactstrap';
import { NavLink as RRNavLink } from 'react-router-dom';
<NavLink exact to="/about" tag={RRNavLink}>About</NavLink>
Have a look on the source code of react-router.NavLink component: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js
Since you are using reactstrap to handle styling for the navbar, you don't, and shouldn't need to rely on NavLink from react-router to do the same thing.
You can use Link from react-router instead, which deals with the routing only, and doesn't add the 'active' className when it is selected. But that's fine, because bootstrap's NavLink will do the styling for you.
import { NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
<NavLink><Link to="/about">About</Link></NavLink>
My advice is to avoid <Link>, <NavLink>, and tag all together when working with React Router v4 and Reactstrap (Bootstrap). I really think all three should be deprecated, especially the tag attribute. Trying to mix-in React Router's <Link> and <NavLink> into Reactstrap components leads to unforeseen style issues with Bootstrap (for example: https://github.com/reactstrap/reactstrap/issues/562).
I've found that from a style standpoint, it's better to use the React Router v4 <Route> component, and pass the history prop to the Reactstrap component.
import { Route } from 'react-router-dom';
import { Button } from 'reactstrap';
<Route
render={props =>
<Button role="button"
onClick={() => props.history.push("/endpoint")}>
</Button>}
/>
I use something like this :
<NavLink to="/about" active={window.location.hash === '/about'}>About</NavLink>
I had the exact prop in react-router 4.3.1 route but also needed to add exact to reactstrap 7.0.2 NavLink to prevent base route from being shown as active at all other child routes.
import { Link, NavLink as RRNavLink, withRouter } from "react-router-dom";
import { NavItem, NavLink } from "reactstrap";
<NavItem>
<NavLink to="/" activeClassName="active" exact tag={RRNavLink}>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink to="/some-route" activeClassName="active" tag={RRNavLink}>
Some Text
</NavLink>
</NavItem>