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
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>
</>
}
Can anyone tell me why the following Link Component is unable to find the linked page? VSCode is literally auto-completing the file name as I type it in but for some reason I keep getting 404.
//index.js in WelcomePage folder
import styles from "/styles/WelcomePage.module.css";
import Link from "next/link";
function WelcomePage() {
return (
<>
<h1 className={styles.title}>This is the Title</h1>
<Link href="/pages/ClassSearch">Class Search</Link>
</>
);
}
export default WelcomePage;
//index.js in ClassSearch folder
function ClassSearch() {
return <h1>The Class Search Page</h1>;
}
export default ClassSearch;
I think you need to link /ClassSearch instead of pages/ClassSearch
If you create pages/ClassSearch/index.js that exports a React component , it will be accessible at /ClassSearch
// <Link href="/pages/ClassSearch">Class Search</Link>
<Link href="/ClassSearch">Class Search</Link>
You can check , Next Page Doc
https://nextjs.org/docs/basic-features/pages
Now, I am stuck for several hours trying to make Storybook work with antd in my new React application (created with create-react-app), without success.
Whatever I do, Storybook does not take the styling of antd.
For example, I created a menu item with antd:
menuNav.tsx:
import React from "react";
import {Menu} from 'antd';
import "antd/dist/antd.less";
const MenuNav = () => {
return (
<Menu mode="horizontal">
<Menu.Item key="menu1">
This is my menu title
</Menu.Item>
</Menu>
)
}
export default MenuNav;
But the result looks like this, no styling at all, but a list:
And as you can see here, it understands that the menu is created by the UI library, but there is no antd styling applied:
This is the story file of MenuNav, 3-Menu.stories.js:
import React from "react";
import MenuNav from '../components/MenuNav';
export default {
title: "MenuNav",
component: MenuNav,
};
export const Text = () => <MenuNav></MenuNav>
I already tried to add a config.js inside ./storybook as suggested here, with no success. Furthermore, I tried adding a webpack.config.js in the same directory as recommended here, same result.
What am I doing wrong?
try adding #import '~antd/dist/antd.css'; to your applications main file, let say index.css which for example is placed in src folder and then add import '../src/index.css'; to .storybook/preview.js
`
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 am trying to implement a login page in admin on rest with a link to a registration form. I am quite a newbie in react and frontend development in general.
I duplicated the login page from the admin on rest demo, but I can't figure out how to add the link in the bottom. I tried adding a component from react-router but I keep getting all sorts of errors. Is there any example I can follow?
EDIT: I am trying to add a registration page with a custom route but the page is displayed inside the admin UI. This is what it looks like:
admin-on-rest is a frontend framework but it's also a bunch of components you can use/integrate in your own app.
It's important to understand how react is working to work with admin-on-rest.
Afaik you have to know about redux, redux-form, react-router and redux-saga.
There is a short description how to add a login page and
how to customize the login page.
But this is not an example.
Here is the source code of the login page. If you really want to duplicate the page you can add a link to the registration page in the render method.
First create a file called
login.js
and duplicate the original login page. Import the Link-Component:
import { Link } from 'react-router-dom';
Afterwards use the Link somewhere, for example between </form> and </Card> (between line 106 and 107).
<Link to={{pathname: "/register"}} >Registration</Link>
In your
app.js
import your created login page:
import Login from './login';
and use it:
<Admin loginPage={Login} authClient={authClient} restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
EDIT:
Now you have a "Registration"-Link in your Login page.
Now, it's time to create the registration page. I am not a admin-on-rest expert, but I think the idea of admin-on-rest is to show always the menu and check the authorization. I think the most of the admin app's will not have a registration page, which must be visible for users which have not logged in and they should not see the menu on the left side. It's similar to a login page. So you have to create custom route to a custom page (without a authorization check) with a custom layout.
Create a new file called
MyLayout.js
with the content of
Layout.js
and remove the lines
injectTapEventPlugin()
and
<Sidebar>
{menu}
</Sidebar>
to hide the menu on the left side.
Then create a file called
customRoutes.js
with the following content:
import React from 'react';
import { Route } from 'react-router-dom';
import Register from './Register';
export default [
<Route exact path="/register" component={Register} />
];
and a file called
Register.js
with
import React from 'react';
import { Card, CardText } from 'material-ui/Card';
import { ViewTitle } from 'admin-on-rest';
const Register = () => (
<Card>
<ViewTitle title="Register" />
<CardText>
<div>This is the register page.</div>
</CardText>
</Card>
);
export default Register;
In your
app.js:
import MyLayout from './MyLayout';
import customRoutes from './customRoutes';
import MyLayout from './MyLayout';
import authClient from './authClient';
<Admin appLayout={MyLayout} loginPage={Login} authClient={authClient} customRoutes={customRoutes} restClient={myApiRestClient}>
This is just an (ugly) example.
Hope this helps. :)