I have a website that I developed using HTML, CSS it's a static website, but now I created a blog project using NEXT.js Integrated with Strapi API. My question is how I can link my static website with my Next.js project?
I tried using Link tags but it didn't work
import Link from "next/link";
function Home({ posts }) {
return (
<>
<HomeHeader />
<Link href="./index.html">
<a>Static Page</a>
</Link>
<HomeLatestPosts Posts={posts} />
</>
);
}
Don't use the router or the "Link" component. Just use the standard html a tag with a href attribute.
Related
I am running into a strange problem with the Link component from react-router-dom. I am trying to create a link with Anchor, but as soon as I put the tag in the page shows nothing - just blank. When I remove the tag, the page shows correctly with the content again.
I have imported Link from react-router-dom version 6.3.0. And this code is from a laravel installation.
My code -
import { Link } from "react-router-dom"
export default function App() {
return <>
<div>
<h1>The main app!</h1>
<Link to="/">Test</Link>
</div>
</>
}
I created website in Gatsby (my first one) and I have trouble with the Gatsby's Link on the deployed page.
I am using a gatsby-starter-react-bootstrap which includes gatsby and react-bootstrap as the name says :)
I located Links in the NavDropdown.Item which is an element of the react-bootstrap.
import React from "react"
import {Link} from "gatsby"
import {Navbar, Nav, NavDropdown, Image} from "react-bootstrap"
import Logo from "../images/Logo_White_RGB_200x42px.png";
import customer_logo from "../images/customer_logo.svg";
const CustomNavbar = ({pageInfo}) => {
return (
<>
<Navbar variant="dark" expand="md" id="site-navbar">
{/* <Container> */}
<Link to="/" className="link-no-style">
<Navbar.Brand as="span">
<Image src={Logo} />
</Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" activeKey={pageInfo && pageInfo.pageName}>
<NavDropdown title="Project" id="collapsible-nav-dropdown">
<NavDropdown.Item><Link to="360-viewer" activeClassName="active">360 view</Link></NavDropdown.Item>
<NavDropdown.Item><Link to="map" activeClassName="active">map</Link></NavDropdown.Item>
<NavDropdown.Item><Link to="description" activeClassName="active">description</Link></NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav className="ml-auto">
<Navbar.Text>
Customer: Customer Group <Image className="customer-logo" src={customer_logo}/>
</Navbar.Text>
</Nav>
</Navbar.Collapse>
{/* </Container> */}
</Navbar>
</>
)
};
export default CustomNavbar
For deployment I use https://www.npmjs.com/package/gh-pages.
Development version run localy on localhost:8000 works totaly fine. Dropdown and all of the links work perfectly.
Routing stops to work when I try to use version for production - gatsby build creates public folder where is index.html. Routing doesn't work also when I deploy page on the github pages.
Summary:
development version works fine
production and deployed version have problems :
when I click on the dropdown, the dropdown menu doesn't open and # sign is added to the URL address - www.website.com/#
when I add to the website address 360-viewer the page is opening but when I click again on the dropdown menu, the # sign is added again to the URL -www.website.com/360-viewer/#
Your application breaks in production with Github Pages because, unlike localhost, it's not served from the root URL. To fix this, you can let Gatsby know from which path your application will be served. Gatsby will then fix the routing and links for you.
In gatsby-config.js:
module.exports = {
pathPrefix: "/your-repo-name",
}
Then add --prefix-paths flag to your build command: gatsby build --prefix-paths
They explain this a bit more in their docs: https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/#deploying-to-a-path-on-github-pages
I am facing an issue with routing and links in Nextjs. I have created a blog like page using React+Typescript and I would like to use the same code in Nextjs. I was initially using import {Link} from 'react-router-dom'; .However since this link doesn't work with Nextjs, I have used the link/next import.
The issue is when, I try to click on "Aboutus" of my Navbar, I get the following error:
404
This page could not be found.
Here is the code of my Navbar.tsx
import React from 'react';
import Link from 'next/link';
const Navbarr : React.FC = () => {
return (
<div>
<AppName >
<Link href="/"><a>Abc</a></Link>
</AppName>
<Button>
<Link href="/new">
<a>Aboutus</a>
</Link>
</Button>
</div>)}
export default NavBarr;
In Next.js when a file is added to the pages directory it's automatically available as a route.
I suggest you to read https://nextjs.org/docs/routing/introduction
I want to redirect a page in reactjs and for that I want to use href tag can I do that?
Here is the code for reference:
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
// import DoctorImg from './doctor.jpg';
class App extends Component {
render() {
return (
<Router>
<Link to = 'https://google.com/'><button>GO GOOGLE</button></Link>
</Router>
);
}
}
export default App;
You can use the Link tag available in React, internally every Link tag is converted to a anchor tag
import { Link } from 'react-router-dom';
<Link to="/Path" > Contact us </Link>
If you want to link to a webpage outside of your React app, a HTML anchor tag will work great:
Click here
target="_blank" will open the webpage in a new tab. rel="noopener noreferrer" prevents security risks, more detail here
If you want to link to a page within your React app you probably DON'T want to use the tag because this will cause your whole app to be reloaded, losing the app's current state and causing a delay for the user.
In this case you may want to use a package like react-router which can move users around your app without reloading it. See Rijul's answer for that solution.
You can use a simple href if you want a simple link:
<a href={'http://google.com'}>Google</a>
//or if you want to use or own
//import {yourcomponent} from'your dir'
import { Link } from 'react-router-dom';
<Link to="/Path" exact component={yourCompponent} > Contact us </Link>
<!-- if u want to use html -->
clik here
No, You are not supposed to. href will refresh the current page and open a new one. Technically href will refresh and push one route in history obj. In react i really suggest you to use react-router for routing
import { Link } from 'react-router-dom';
<Link to = 'https://google.com/'><button>GO GOOGLE</button></Link>
Do like this in react with react router
The answer is yes. You can.
<Router>
<button>GO GOOGLE</button>
</Router>
As for "should I" that is another question but for what you have asked the simple answer is yes and it will work fine.
<Link to={{ pathname: "https://twitter.com/Turkcell" }}
target="_blank"><i className="icon icon-twitter"/>
</Link>
You can use bro.
I'm still learning React.js. Recently I've built a site using React.js. I was trying to add a demo page (pure html and javascript) to the react site. The demo page consists of an index.html, a bundle.js and a css stylesheet. I created a demo folder at the root of the react site and put the demo files inside that folder. My question is how I can get access to the demo page by going to http://reactsite/demo/
Do I have to use react router and wrap the demo page into a react component?
Thanks in advance!
To render pure html in with react yes you would need to use react-router to render a component at that url and then use dangerouslySetInnerHTML to read the html file as real html and not escape characters in the file
your route would be something like this
<Route path="demo" component={TemplateHTMLComponent} />
then your component would be something like this
const htmlFile = require('../some/path/to/html/file');
class TemplateHTMLComponent extends React.Component {
render() {
return <div dangerouslySetInnerHTML={{ __html: htmlFile}};
}
}