I want the page to change when you click on one of the two boxes. The problem is that the URL changes as it is supposed to but page content remains and only changes after refreshing. I read some similar questions and tried adding withRouter and that produced the same results. Here's the code:
import React from 'react';
import './App.css';
import NavBar from './Nav.js';
import Library from './PathwayHome.js';
import Profile from './ProfileHome.js';
import Home from './HomePage.js';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App () {
return (
<Router>
<div className="Home">
<NavBar/>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/ProfileHome" exact component={Profile}/>
<Route path="/PathwayHome" exact component={Library}/>
</Switch>
</div>
</Router>
);
}
export default App;
This is the component with the links:
import React from 'react';
import SearchBar from './SearchBar';
import './App.css';
import Footer from './FooterHome.js';
import Profile from './ProfileHome.js';
import {BrowserRouter as Router, Link} from 'react-router-dom';
import {Grid} from '#material-ui/core';
function Home () {
return (
<Router>
<Grid container spacing={12}>
<div className="PaneContainer">
<Link to="/ProfileHome"><div className="Profile"/></Link>
<Link to="/PathwayHome"><div className="Pathway"/></Link>
</div>
<SearchBar/>
<Footer/>
</Grid>
</Router>
);
}
export default Home;
What am I doing wrong? I'm starting to wonder if maybe a multi-page webapp would be better for my use case and I should not use React? Thoughts/Suggestions?
Related
I have been trying to find a solution for this.
Navbar, Home, Services, Contactus are different components that render fine when I don't user the Route method. They also render fine within the BrowserRouter tags. But when I try to place them within the Route tags, the whole screen goes blank
import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import React, { Component } from 'react';
function App() {
return (
<div className="App">
<h1>This is React Router</h1>
<Router>
<Navbar/>
<Route path="/home" Component={Home} exact />
<Route path="/services" Component={Services} exact />
<Route path="/contactus" Component={Contactus} exact />
</Router>
</div>
);
}
export default App;
What am I doing wrong?
I have managed to fix this. The library installed was react-router-dom v6 but the coding was done for earlier versions. Below are the changes I made and its now working.
Fixes -
All the <Route> lines need to be enclosed within a <Routes> block
For some reason, component is not being accepted as a parameter in the new version so essentially component={Home} is now replaced by element={<Home/>}
And of course, we now need to import Routes also from react-router-dom
import logo from './logo.svg';
import './App.css';
import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import React from 'react';
function App() {
return (
<div className="App">
<h1>This is React Router</h1>
<Router>
<Navbar/>
<Routes>
<Route path="/home" element={<Home/>} exact />
<Route path="/services" element={<Services/>} />
<Route path="/contactus" element={<Contactus/>} />
</Routes>
</Router>
</div>
);
}
export default App;
I am struggling to see why nothing shows up when I use a router in my project (Just a blank screen). I simply installed react-router-dom as normal. I have tried changing the versions but haven't had any success
Here is the app.js file
import React from 'react';
import './App.css';
import navbar from './components/navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<Router>
<navbar />
<Routes>
<Route path="/" element={<navbar/>}/>
</Routes>
</Router>
);
}
export default App;
And here is the navbar.js file:
import React, {useState} from 'react';
import { Link } from 'react-router-dom';
function navbar() {
return (
<nav className='navbar'>
<div className="navbar-container">
<Link to='/' className='navbar-logo'>
TRL<i className='fab fa-typo3'/>
</Link>
</div>
</nav>
);
}
export default navbar;
In JSX, lower-case tag names are considered to be HTML tags.
That's why you need to capitalize the name of your navbar component otherwise react.js won't treat it like other valid JSX. It should be imported as Navbar.
So, your App.js will look something like this.
import React from 'react';
import './App.css';
import Navbar from './components/navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Navbar/>}/>
</Routes>
</Router>
);
}
export default App;
Try to make the navbar component capital as Navbar , you can also pass element={Navbar} directly.
You need to Capitalize the name of your component for the JSX to understand it.
JSX won't know if that is an HTML tag or a valid JSX in this case a component.
Nav js
import React, {useState} from 'react';
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav className='navbar'>
<div className="navbar-container">
<Link to='/' className='navbar-logo'>
TRL<i className='fab fa-typo3'/>
</Link>
</div>
</nav>
);
}
export default Navbar;
App js
import React from 'react';
import './App.css';
import Navbar from './components/navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Navbar/>}/>
</Routes>
</Router>
);
}
export default App;
I have the following index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Main from './main/main';
import './index.css';
ReactDOM.render(
<BrowserRouter><Main /></BrowserRouter>,document.getElementById('root'));
the following in main.js:
import React, { Component } from 'react';
import NavMenu from "./navmenu";
import Content from "./content";
import './main.css';
class Main extends Component {
render() {
return (
<div id="main-layout">
<div id="main-header">
<div><img src={(require("./images/ppslogo-small.png"))} alt="eeeee"/></div>
<div><h2>Lil Test By Me</h2></div>
</div>
<div id="main-content">
<NavMenu />
<Content />
</div>
<div id="main-footer">
<div>Copyright © 2020. Powered By me. All Rights Reserved.</div>
</div>
</div>
);
}
}
export default Main;
And The following in content.js
import React, { Component } from 'react';
import {Route, Switch} from 'react-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Switch>
<Route exact path="/Dashboard" component={Dashboard} />
<Route path="/Invoicing" component={Invoicing} />
</Switch>
)
}
};
export default Content
It it my attempt to create an SPA with the Content component as my target for all my subsequent pages; however, I am clearly doing something wrong as I am getting all kinds of errors all over the place. Can anyone immediately see what I am doing incorrectly here?
Route and Switch needs to be imported from react-router-dom instead of react-dom
import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Switch>
<Route exact path="/Dashboard" component={Dashboard} />
<Route path="/Invoicing" component={Invoicing} />
</Switch>
)
}
};
export default Content
Use react-router-dom instead of react-router and then
change your content.js code to this.
import React, { Component } from 'react';
import {Route, Switch, BrowserRouter as Router} from 'react-router-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Router>
<Switch>
<Route exact path="/dashboard" component={Dashboard} />
<Route path="/invoicing" component={Invoicing} />
</Switch>
</Router>
)
}
};
export default Content
notice that I have added Router above the switch. and changed react-router to react-router-dom and also transformed the routes to lowercase
Using react-router-dom, components are not displaying inside my embedded router.
Made sure all of the spellings were correct, the components load fine without the router.
import React, { Component } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import Constants from '../helpers/Constants'
import Header from "./Header";
import SideBar from "./SideBar";
import Candidate from "./Candidate";
import Settings from "./Settings";
export default class Base extends Component {
render() {
return (
<div>
<Header/>
<SideBar/>
<div id="app-body">
<Switch>
<Route component={Candidate} exact path="/#candidates"/>
<Route component={Settings} exact path="/#settings"/>
</Switch>
</div>
</div>
)}
}
nothing is visible
Hello! What I'm trying to do is rework my react-router so the NavLink renders a completely new page on click, instead of rendering at the bottom of the div, as shown in the gif above.
Here's the content of my main App.js component:
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home.js';
import About from './About.js';
import September from './September.js';
import Trilogy from './Trilogy.js';
class App extends Component {
render() {
return (
<Router>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/about/' component={About} />
<Route path='/september/' component={September} />
<Route exact path='/september/trilogy/' component={Trilogy} />
</Switch>
</div>
</Router>
);
}
}
export default App;
The Home component's code, which holds the NavBar that's used in the Home Page.
import React, { Component } from 'react';
import { BrowserRouter as Router, NavLink, Switch, Route } from 'react-router-dom';
import logo from './logo.png';
import About from './About.js';
import September from './September.js';
import Trilogy from './Trilogy.js';
let NavBar = () => {
return (
<div>
<h2 className="container2"><NavLink to='/about/'>About</NavLink> </h2>
<img src={logo} className="somersetLogo" alt="somersetLogo" />
<h2 className="container" >Contact</h2>
</div>
)
}
class Home extends Component {
render() {
return (
<Router>
<div>
<NavBar />
<Switch>
<Route exact path='/about/' component={About} />
</Switch>
</div>
</Router>
)
}
}
export default Home;
Any idea what went wrong? Any help would be appreciated! Thanks!
If you are using react router v4 or above it should be something like this.
import { Link } from 'react-router-dom';
<Link to='/about'>
About
</Link>
Why you are defining router again in Home component which is not needed. Keeping route configuration in App component would be enough. Hope this helps. Happy coding !