I've been working on a react single page app and have been trying to get the routing to work.
I believe the routing itself actually works however the page does not load the correct content unless the page is manually reloaded. Back and forward browser arrows also work.
For example I can navigate to localhost:3000 fine and the content is loaded correctly but when I press a button to navigate to localhost:3000/contacts nothing is displayed unless I refresh the page. Once manually refreshed the contacts page shows up. What gives?
index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom';
// Import App component
import App from './App'
// Import service workers
import * as serviceWorker from './serviceWorker'
// Render App component in the DOM
ReactDOM.render(
<Router>
<App />
</Router>
, document.getElementById('root')
)
serviceWorker.unregister()
App.tsx
// Import necessary dependencies
import React from 'react'
import Routes from './Routes'
// Create App component
function App() {
return (
<div className="App">
<Routes />
</div>
)
}
export default App
history.tsx
import { createBrowserHistory as history} from 'history';
export default history();
Home/Home.tsx
import React, { Component } from "react";
import history from './../history';
import "./Home.css";
export default class Home extends Component {
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
Contact/Contact.tsx
import React, { Component } from 'react';
class Contact extends Component {
render() {
return (
<div>
hello world
</div>
);
}
}
export default Contact;
Routes.tsx
import React, { Component } from "react";
import {BrowserRouter, Router, Switch, Route } from "react-router-dom";
import Contact from "./Contact/Contact";
import Home from "./Home/Home"
import history from './history'
export default class Routes extends Component {
render() {
return (
<div>
<Router history={history}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/Contact" component={Contact} />
</Switch>
</Router>
</div>
)
}
}
Any help greatly appreciated
I think there's some extra code that might be causing conflict. You're defining the Router from react-router-dom twice:
Once here, in index.tsx
ReactDOM.render(
<Router> // here
<App />
</Router>
, document.getElementById('root')
)
and then again in Routes.tsx
<Router history={history}> // here
<Switch>
<Route path="/" exact component={Home} />
<Route path="/Contact" component={Contact} />
</Switch>
</Router>
You have to drop one of them, they're probably conflicting each other
Update
In addition to that, I think you should not use the history object directly from your export, but access it through the HOC withRouter. Then, you'd wrap
So you'd do something like this
import React, { Component } from "react";
import { withRouter } from 'react-router-dom'
import "./Home.css";
class Home extends Component {
const { history } = this.props
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
export default withRouter(Home)
I think the issue here is that you need to wrap your pages with withRouter() like so:
import React, { Component } from "react";
import history from './../history';
import "./Home.css";
import { withRouter } from 'react-router-dom'; //<---------- add this
class Home extends Component {
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
default export withRouter(Home); //<-------------- and add this
You will need to do the same on your Contact page as well.
Why do you have two routers?
I guess you simply need to remove the Router either in index.tsx or in Routes.tsx
According to you file naming I would remove the Router in Routes.tsx
It seems like you are using the history package for navigation. If you are using the react-router v5, then you may have to downgrade the history package to 4.10.1 until the history package developers issue a new release with the fix. As of writing this, the latest release version of history package is v5.0.1, and if you see a new release than this, you can try with that version first to see if it works, before doing the downgrade to 4.10.1
Issue Link -> https://github.com/remix-run/history/issues/804
Related
I have been receiving white blank pages when trying to create multiple pages within my app and I have been using the router-dom to try and fix this but still can't understand why. Here is my code with Home and Navigation js being inside a components folder in the src directory and App.js just inside the src directory.
App.js
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Glazing from './components/Glazing';
import Navigation from './components/Navigation';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigation />
<Route path="/" component={Home} exact/>
<Route path="/glazing" component={Glazing}/>
</div>
</BrowserRouter>
);
}
}
export default App;
Nav.js
import React from 'react';
import { NavLink } from 'react-router-dom';
const Navigation = () => {
return (
<div>
<NavLink to="/">Home</NavLink>
<NavLink to="/glazing">Glazing</NavLink>
</div>
);
}
export default Navigation;
Home.js
import React from "react";
import logo from '../logo.svg';
import './Home.css';
import "#fontsource/dm-sans";
function home() {
return (
<div className="Home">
<header className="Home-header">
<h1>EPC RATING PREDICTOR</h1>
</header>
<button> GET STARTED</button>
</div>
);
}
export default Home;
If you are using react-router-dom#6 then there are a couple things you need to address.
The Switch component was replaced by the Routes component and all Route components must be wrapped/rendered directly by Routes, or another Route component in the case of nesting routes.
The Route component API changed; gone are the component, and render and children function props, all replaced by a single element prop taking a ReactNode, a.k.a. JSX, value.
Example:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Glazing from './components/Glazing';
import Navigation from './components/Navigation';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/glazing" element={<Glazing />} />
</Routes>
</div>
</BrowserRouter>
);
}
}
See the Upgrading from v5 guide for other changes.
I'm running into an issue where my route tag in specific is not rendering any components.
Steps I have tried:
Changed import of { Route } from "react-router-dom".
Changed paths to see if other paths render.
Rendered the component within tags (this worked).
The issue seems to be coming down to something going on with the tag.
Here is a copy of my code:
import { Component } from "react";
//import all components rendered
import NavBar from "./Nav";
import Orders from "./Orders";
import Cart from "./Cart";
import Menu from "./Menu";
import Login from "./Login.jsx";
import Home from "./Home.jsx";
// for routing
import { Route } from "react-router";
import { BrowserRouter } from "react-router-dom";
//main App to combine all components and be rendered
class App extends Component {
render() {
return (
<BrowserRouter>
<NavBar />
<Route path="/" exact component={Login} />
</BrowserRouter>
)
}
}
export default App;
The versions are:
├─┬ react-router-dom#6.2.1
│ └── react-router#6.2.1 deduped
└── react-router#6.2.1
I tried changing the tags to as per a suggestion and it still didn't work, but I may have implemented it incorrectly. Here is what I tried:
import { Component } from "react";
//import all components rendered
import NavBar from "./Nav";
import Orders from "./Orders";
import Cart from "./Cart";
import Menu from "./Menu";
import Login from "./Login.jsx";
import Home from "./Home.jsx";
// for routing
import { Route } from "react-router";
import { BrowserRouter, Routes } from "react-router-dom";
//main App to combine all components and be rendered
class App extends Component {
render() {
return (
<Routes>
<NavBar />
<Route path="/" exact component={Login} />
</Routes>
)
}
}
export default App;
The errors I am getting on the console are:
Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
Choo 3
React 17
Choo 2
Webpack 3
The above error occurred in the <Routes> component:
Routes#http://localhost:3000/static/js/bundle.js:54433:7
App#http://localhost:3000/static/js/bundle.js:42:1
Any help would be greatly appreciated!
Solution:
Was resolved by switching the "component" tag to "element" tag and removing the tag outside as follows:
<>
<NavBar />
<Routes>
<Route path="/" exact element={<Login />} />
</Routes>
</>
List item
put Navbar outside for Routes tag like i did below
import { BrowserRouter, Routes,Route } from "react-router-dom";
//main App to combine all components and be rendered
class App extends Component {
render() {
return (
<>
<NavBar />
<Routes>
<Route path="/" element={<Login/>} />
</Routes>
</>
)
}
}
export default App;
also for newer version of react-router-dom use element instead of component and remove exact
It will be good if you use BrowserRouter index.js and wrapper App over there
for example index.js
<BrowserRouter><App/></BrowserRouter>
I ran into the same issue on react router v6, you need to wrap all your routes in the Routes component from react-router-dom.
Try this:
import { Component } from "react";
//import all components rendered
import NavBar from "./Nav";
import Orders from "./Orders";
import Cart from "./Cart";
import Menu from "./Menu";
import Login from "./Login.jsx";
import Home from "./Home.jsx";
// for routing
import { BrowserRouter, Route, Routes } from "react-router-dom";
//main App to combine all components and be rendered
class App extends Component {
render() {
return (
<BrowserRouter>
<NavBar />
<Routes>
<Route path="/" element={<Login/>} exact/>
</Routes>
</BrowserRouter>
)
}
}
export default App;
I am a bit new to react and I am facing a problem with the Router.
The routing works when I enter the URL directly on the browser, however when I click on the link, the URL changes on the browser (e.g http://localhost:8080/contactus), but the content don't get updated (But if I do a refresh, it gets updated).
Here is my github repo:
https://github.com/Arefaat18/Project
Here is my MainComponent.js
import React, { Component } from 'react';
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import {Switch, Route, Redirect,withRouter,BrowserRouter as Router} from 'react-router-dom';
import Header from './HeaderComponent';
import ContactUs from './ContactUsComponent';
import AboutUs from './AboutUsComponent';
import Home from './HomeComponent.js';
import {connect} from 'react-redux';
class Main extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Router>
<Header />
<TransitionGroup>
<CSSTransition classNames="page" timeout={300}>
<Switch>
<Route path="/home" component={Home} />
<Route exact path = "/contactus" component ={ContactUs} />
<Route exact path = "/aboutus" component ={AboutUs} />
<Redirect to="/home" />
</Switch>
</CSSTransition>
</TransitionGroup>
</Router>
</div>
);
}
}
export default withRouter(Main);
And here is my App.js file
import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import {BrowserRouter} from 'react-router-dom';
import {Provider} from 'react-redux';
import {ConfigureStore} from './components/configureStore';
const store = ConfigureStore();
class App extends Component {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<div className="App">
<Main />
</div>
</BrowserRouter>
</Provider>
);
}
}
export default App;
and here is the relevant dependancies
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-redux": "^7.2.1",
"react-redux-form": "^1.16.14",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.4",
And here is my ContactUsComponent, the other components are just the same with different text
import React, { Component } from 'react';
class ContactUs extends Component {
render(){
console.log("RENDER");
return (
<div>
<h1> Contact Us</h1>
</div>
);
}
}
export default ContactUs;
Thanks in advance.
Well I also stuck with the same Issue but in react 18 our component in index.js file is by default wrapped in react strict mode
like this:
<React.StrictMode>
<App/>
</React.StrictMode>
I removed React strict Mode tags then it worked perfectly fine for me
Right, you've extraneous Routers declared, your header component has one. Remove this Router.
It is because each Router provides a routing context, and each component subscribing to a routing context gets the context from the closest router. The router providing context to the header wasn't rendering any routes so that is why the URL would change but the router actually rendering the Routes wasn't being notified that it should render a different path.
class Header extends Component {
constructor(props) {
...
}
...
render() {
return (
<React.Fragment>
{/* <Router> */} // <-- Remove this Router Component
<Navbar dark expand="md">
...
</Navbar>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
...
</Modal>
{/* </Router> */}
</React.Fragment>
);
}
}
I ran into a similar problem. I used Link in the components, but I imported it from #reach/router.
As a result, I replaced
import { Link } from "#reach/router"
with
import { Link } from "react-router-dom"
in each component; and everything worked as it should
I just finish the course Front-End Web Development with React. I think you are learning this course too so I see nothing wrong with your code, possibly the problem is inside your ContactUs component. If you can provide your ContactUs code then I can debug it
I had the same issue as well but I had to wrap my App.js with BrowseRouter in the index.js file.
import {BrowserRouter as Router} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Router>
<App />
</Router>
);
I created a simple react application. It has a header and three other components called welcome, feature 1 and feature 2.
index.js
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
import App from './App';
render((
<BrowserRouter>
<Route path="/" component={App} />
</BrowserRouter>
), document.getElementById('root'));
App.js
import React from 'react'
import Header from './Header'
import Main from './Main'
const App = () => (
<div>
<Header />
<Main />
</div>
)
export default App
Header.js
import React, { Component } from 'react';
export default class Header extends Component {
componentDidMount() {
APICall('/user')
}
render() {
return (
<div>I am header</div>
)
}
}
Main.js
import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import Welcome from './Welcome'
import Feature1 from './Feature1'
import Feature2 from './Feature2'
export default class Main extends Component {
render() {
return (
<div>
<Route exact path="/" component={Welcome} />
<Route path="/feature1" component={Feature1} />
<Route path="/feature2" component={Feature2} />
</div>
)
}
}
welcome.js
import React, { Component } from 'react';
export default class Welcome extends Component {
render() {
return (
<div>Welcome!</div>
)
}
}
Feature1.js
import React, { Component } from 'react';
export default class Feature1 extends Component {
render() {
return (
<div>I am Feature1</div>
)
}
}
Feature2.js
import React, { Component } from 'react';
export default class Feature2 extends Component {
render() {
return (
<div>I am Feature2</div>
)
}
}
Welcome, Feature1 and Feature2 are in different routes where as Header is common in all the routes. Say I have a user and I want to show the username on the header. I will make an API call to get the username in componentDidMount() life-cycle hook of header.
Now if I change the route, I don't want the API call to be made again as the username is not going to change. And I thought that is how this was going to behave. As Header component is same in all the routes, I thought Header won't re-mount when I change the route. But that is not what is happening. It is remounting and making the API call again. How can I make sure that the API call is made only once?
I think in this case considering your Header is aware of what User is logged, i.e. App.js state passed down as props, you could use shouldComponentUpdate():
shouldComponentUpdate(nextProps, nextState) {
// see if user changed
if(nextProps.user !== nextState.user){
return true;
}
// returning false will prevent re-rendering
return false;
}
I hope this is somehow useful.
Have a good day!
change to this in index.js:-
<BrowserRouter>
<App />
</BrowserRouter>
It seems you messed up the routing then, because in your router you have only one route registered, which seems to trigger on any child route change. Also, routes should be wrapped in a Switch component.
Check out this structure
/** index.js */
import React from 'react'
import { render } from 'react-dom'
import App from './App';
render(<App />, document.getElementById('root'));
/** App.jsx */
import React from 'react'
import Header from './Header'
import Main from './Main'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
const App = () => (
<div>
<Header />
<BrowserRouter>
<Switch>
<Route exact path="/" component={Homepage} />
<Route exact path="/f1" component={Feature1} />
<Route exact path="/f2" component={Feature2} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
</div>
)
export default App
I'm working on a react app and I have several components I want to use on my root path. I wonder what are best practices as far as rendering then on one component and then linking that component to my root or if I could add all components to my root path.
I want to add 3 other components to root path.
This is my app.js file:
import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Header from "./components/Header";
import EyewearTitle from "./components/EyewearTitle";
import Buy from "./components/Buy";
import './App.css';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Header />
<Route exact path="/" component={EyewearTitle} />
<Route exact path="/buy" component={Buy} />
</div>
</BrowserRouter>
);
}
}
export default App;
You should add all components you want to render under a single component. For example, I might use a <ShoppingScreen/> component, and on that screen, would render:
render() {
return(
<div className="shopping-screen">
<ShoppingScreenSideBar/>
<ShoppingScreenItems/>
</div>
);
}