React Router Link changes URL but not view - javascript

I have an App.js, that looks like this:
import React, { Component } from 'react';
import './App.css';
import PdfViewer from './components/PdfViewer';
import {BrowserRouter as Router, Link, Switch, Route} from 'react-router-dom'
import history from './history';
import Homepage from './components/Homepage'
class App extends Component {
render() {
return (
<Router history={history}>
<Switch>
<Route exact path="/" component={Homepage} />
<Route path="/pdfviewer" component={PdfViewer} />
</Switch>
</Router>
);
}
}
inside a nested component i have a <Link> like this:
import React from 'react';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import DashboardIcon from '#material-ui/icons/Dashboard';
import { BrowserRouter as Router, Link } from "react-router-dom";
export const MainListItems = () => {
return(
<Link to="/">
<div>
<ListItem button>
<ListItemIcon>
<DashboardIcon />
</ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItem>
</div>
</Link>
)}
here is my component, that renders a Link.
When it is clicked, the Url changes, but it does not render a new component... how come?

Related

Why Route tag can't render the component in React?

App.js code-
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
const App = () => {
return (
<Router>
<Header />
<main className='py-3'>
<Container>
<HomeScreen />
</Container>
</main>
<Footer />
</Router>
);
};
export default App;
My app.js was like this and everything was working fine. But after that I added Route tag and the code become like this
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
const App = () => {
return (
<Router>
<Header />
<main className='py-3'>
<Container>
<Route exact path='/' component={HomeScreen} />
</Container>
</main>
<Footer />
</Router>
);
};
export default App;
But after adding Route, HomeScreen is not rendering?
Can anybody tell me why this is happening?
In react-router-dom v6 the Route component must be rendered into a Routes component, and the routed components are rendered on the element prop as a ReactElement (a.k.a. JSX) since the component, and render and children function props no longer exist.
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Container } from "react-bootstrap";
import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from "./screens/HomeScreen";
const App = () => {
return (
<Router>
<Header />
<main className='py-3'>
<Container>
<Routes>
<Route path='/' element={<HomeScreen />} />
</Routes>
</Container>
</main>
<Footer />
</Router>
);
};

I am having an issue with react router as my url is getting updated on clicking on it but the page is not getting rendered

I am having an issue with react router as my url is getting updated on clicking on it but the page is not getting rendered but when I reload it at that specific url then it renders the content whereas I want it to be rendered as soon as I click on the link
this is my App.js
import React from 'react';
import Nav from './Nav';
import { BrowserRouter as Router ,Switch, Route} from 'react-router-dom';
import About from './About'
function App() {
return (
<>
<Router>
<Nav/>
<Switch>
<Route exact path='/about' render={About} />
</Switch>
</Router>
</>
);
}
export default App;
This is my Nav.js
import React from "react";
import {BrowserRouter as Router , Link } from "react-router-dom";
import './App.css';
function Nav(){
return(
<Router>
<nav>
logo
<Link to="/about">
About
</Link>
<Link to='/shop'>
shop
</Link>
</nav>
</Router>
)
}
export default Nav
this is my About.js
import React from "react";
function About(){
return(
<div>
About Page
</div>
)
}
export default About
You should either wrap the App component with BrowserRouter or, wrap the App component with Router component that accepts a history prop.
Index.js
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>,document.getElementById("root"));
App.js
import React from 'react';
import Nav from './Nav';
import { BrowserRouter as Router ,Switch, Route} from 'react-router-dom';
import About from './About'
function App() {
return (
<>
<Nav/>
<Switch>
<Route exact path='/about'>
<About/>
</Route>
</Switch>
</>
);
}
export default App;
Nav.js
import React from "react";
import {BrowserRouter as Router , Link } from "react-router-dom";
import './App.css';
function Nav(){
return(
<nav>
logo
<Link to="/about">
About
</Link>
<Link to='/shop'>
shop
</Link>
</nav>
)
}
export default Nav
Since, Nav.js and other components using Routes are wrapped within the app component which is further wrapped within BrowserRouter in index.js, you don't need to include Router in each component having Route or Link components.

How to call another component using Routerlink in reactjs

React RouterLink not working. i have a component like profile.js i want to redirect that component by onclick. so o tried many way to do this. and i dont understand router and router as link. can you refer me some exact documentation about this.
here is my code:
//Nav bar
<Transitions in={open} {...TransitionProps}>
<MainCard>
<CardContent>
<List component="nav" className={classes.navContainer}>
<ListItem className={classes.listItem}
sx={{ borderRadius: theme.palette.borderRadius + "px", }}
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
component={React.forwardRef((props, ref) => (
<RouterLink {...props} to="../Profile/profile"/>
))} >
<ListItemIcon>
<IconSettings stroke={1.5} size="1.3rem" />
</ListItemIcon>
<ListItemText
primary={<Typography variant="body2">Account Settings</Typography> }/>
</ListItem>
</CardContent>
</MainCard>
</Transitions>
This component need to redirect when i click menu.
//Profile.js
import React from "react";
import "./profile.css";
function profile() {
return (
<card>
<div class="main-content">
<p>Profile</p>
</div>
</card>
)};
Routes:
//CustomRoutes.js
import React from "react";
import { Route } from "react-router-dom";
import Profile from "./component/layout/MainLayout/Header/Profile/profile";
export default [
<Route path="/profile" exact component={Profile} />,
];
App.js
//App.js
import customLayout from "./component/layout/customLayout/customLayout";
import profile from "./component/layout/MainLayout/Header/Profile/profile";
import AdminBuilder from "./AdminBuilder";
import React, { Component, createContext } from "react";
class App extends Component {
render() {
return (
<AdminBuilder profile={profile} />
);
}
In the main file, i think it would be app.js
you need to tell your profile path to which location it should go. for example:
<Route path="/profile" exact component={Profile} />
Now you can use this /profile path into your
<RouterLink {...props} to="../Profile/profile"/>
but its better to use <Link to="/profile"> </Link>
Hope it make since.
#Update:
import React from "react";
import { Route } from "react-router-dom";
import Profile from "./component/layout/MainLayout/Header/Profile/profile";
**what is this export default?**
export default [
<Route path="/profile" exact component={Profile} />,
];
#Update2
in your app please make it like this>
import React from 'react'
import customLayout from "./component/layout/customLayout/customLayout";
import profile from "./component/layout/MainLayout/Header/Profile/profile";
import AdminBuilder from "./AdminBuilder";
import React, { Component, createContext } from "react";
export default function App() {
return (
<div>
<AdminBuilder profile={profile} />
</div>
)
}

Url change but not rendering component React Router

Hi i am trying to change the route of my website to go to Contact, when the menu is clicked.
Whenever i press the button for the homepage which is "Forside", the routing works perfectly.
But as soon as i press the button for the contact which is "Kontakt", the url changes and no component renders. But if i refresh the page, it shows up..
Any ideas what is wrong with my code, or any way to fix it?
All help will be appreciated thanks.
My App.js
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Forside from './forside';
import Kontakt from './Kontakt';
import Header from './Header'
const App = () => {
return(
<Router>
<div>
<Header/>
<Switch>
<Route exact path="/" component={Forside}/>
<Route path="/kontakt" component={Kontakt}/>
</Switch>
</div>
</Router>
)
}
export default App
And this is where i link to the different routes.
import React, { useState } from 'react';
import './header.css'
import { makeStyles } from '#material-ui/core/styles';
import BottomNavigation from '#material-ui/core/BottomNavigation';
import BottomNavigationAction from '#material-ui/core/BottomNavigationAction';
import ContactMailIcon from '#material-ui/icons/ContactMail';
import LocationOnIcon from '#material-ui/icons/LocationOn';
import {Link} from 'react-router-dom';
const useStyles = makeStyles({
root: {
width: 500,
},
});
const Header = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return(
<div className="hed">
<h1 className="logo"><span>IT</span> ARBEJDE.DK</h1>
<BottomNavigation
value={value}
className="nav"
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
className={classes.root}
>
<Link to="/">
<BottomNavigationAction label="Søg job" icon={<LocationOnIcon />} />
</Link>
<Link to="/kontakt">
<BottomNavigationAction label="Kontakt" icon={<ContactMailIcon/>} />
</Link>
</BottomNavigation>
</div>
)
}
export default Header
add exact to it to your route
<Route exact path="/kontakt" component={Kontakt}/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Since i didn't get a answer, i have figured it out on my own. So i would just like to share the solution, for other people who maybe are expecting the same bug.
I fixed the problem, by restructuring my code.
I placed my router inside the index.js component like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter as Router} from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<App/>
</Router>
</React.StrictMode>,
document.getElementById('root')
);
Then placed the Header code inside my App.js, instead of having the Component rendering.
So i refactored the code like this:
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Kontakt from './Kontakt';
import Forside from './forside';
import { makeStyles } from '#material-ui/core/styles';
import BottomNavigation from '#material-ui/core/BottomNavigation';
import BottomNavigationAction from '#material-ui/core/BottomNavigationAction';
import ContactMailIcon from '#material-ui/icons/ContactMail';
import LocationOnIcon from '#material-ui/icons/LocationOn';
import {Link} from 'react-router-dom';
import './header.css'
const useStyles = makeStyles({
root: {
width: 500,
},
});
const App = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return(
<div>
<div className="header-container">
<h1 className="logo"><span>IT</span> ARBEJDE.DK</h1>
<BottomNavigation
value={value}
className="nav"
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
className={classes.root}
>
<BottomNavigationAction label="Søg job" component={Link} to="/" icon={<LocationOnIcon />} />
<BottomNavigationAction label="Kontakt" component={Link} to="/kontakt" icon={<ContactMailIcon/>} />
</BottomNavigation>
</div>
<Switch>
<Route exact path="/" component={Forside}/>
<Route exact path="/kontakt" component={Kontakt}/>
</Switch>
</div>
)
}
export default App

JSX element type 'Route' does not have any construct or call signatures - route problem

I have got error with Route "message": "JSX element type 'Route' does not have any construct or call signatures."
in Browser:
./src/app/layout/App.tsx
Attempted import error: 'react-router-dom' does not contain a default export (imported as 'Route').
Really I don`t know what is wrong.
import React from "react";
import NavBar from "../../features/nav/NavBar";
import Footer from "../../features/footer/Footer";
import Route, { BrowserRouter } from "react-router-dom";
import Dashboard from "../../features/dashboard/Dashboard";
import TestApiDashboard from "../../features/testApiDashboard/TestApiDashboard";
const App = () => {
return (
<div>
<div className="main">
<NavBar />
<Route path="/" component={Dashboard} />
<Route path="/testApiDashboard" component={TestApiDashboard} />
<Route path="/" component={Dashboard} />
</div>
<Footer />
</div>
);
};
export default App;
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import './app/layout/styles.css';
import App from './app/layout/App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
You need to import differently as the following:
import {
BrowserRouter,
Route,
} from "react-router-dom";
Instead of your code snippet:
import Route, { BrowserRouter } from "react-router-dom";
You can read further at <Route />. I hope this helps!

Categories