We Keep Coding

React routing cannot read pathname property on navigation

I have recently started developing frontend apps with React and I come from a little programming experience with react-native.
To improve my knowledge on react I studied both the official documentation and took courses on udemy.
So I'm building a small test app in which to use react routing (following what we saw in the udemy course).
However, I have the following error related to routing (I attach the error screen)
I have searched here on the stack that online for possible solutions, such as downgrading react-router-dom, or modifying the history declaration, but unfortunately I still get this error and I can't understand what it comes from.
Do you have any suggestions or advice?
My app configuration:
package.json
"name": "app1",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"history": "^5.3.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^7.2.8",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
routes.js
import React, { Component } from 'react';
import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';
//import container home-page
import Container1 from './containers/container1';
import Header from './containers/header';
import history from './utils/history';
//react router import
import { Router, Route } from 'react-router';
class Routes extends Component {
render() {
return (
<div>
<Router history={history.location} navigator={history} >
<div>
<Header />
<Route path="/" component={Container1} />
<Route path="/component1" component={Component1} />
<Route path="/component2" component={Component2} />
<Route path="/component3" component={Component3} />
</div>
</Router>
</div>
)
}
}
export default Routes;
-history.js
var createHistory = require('history').createBrowserHistory;
export default createHistory();

Issue
The low-level Router takes a few different props than it did in v5.
Router
declare function Router(
props: RouterProps
): React.ReactElement | null;
interface RouterProps {
basename?: string;
children?: React.ReactNode;
location: Partial<Location> | string; // <-- required
navigationType?: NavigationType;
navigator: Navigator; // <-- required
static?: boolean;
}
Router source
export function Router({
basename: basenameProp = "/",
children = null,
location: locationProp, // <-- undefined location
navigationType = NavigationType.Pop,
navigator,
static: staticProp = false,
}: RouterProps): React.ReactElement | null {
...
let {
pathname = "/", // <-- cannot read "pathname" of undefined!
search = "",
hash = "",
state = null,
key = "default",
} = locationProp;
...
if (location == null) {
return null;
}
return (
<NavigationContext.Provider value={navigationContext}>
<LocationContext.Provider
children={children}
value={{ location, navigationType }}
/>
</NavigationContext.Provider>
);
}
You are incorrectly using a history prop instead of the location prop, and this is why location is undefined in the component and unable to read a pathname.
Additionally, in react-router-dom#6 the Route components necessarily need to be wrapped in the Routes component in order for route path matching and rendering to work.
Solution
Pass the correct required props and wrap the Route components in Routes component.
import React, { Component } from 'react';
import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';
//import container home-page
import Container1 from './containers/container1';
import Header from './containers/header';
import history from './utils/history';
//react router import
import { Router, Routes, Route } from 'react-router';
class Routes extends Component {
render() {
return (
<div>
<Router location={history.location} navigator={history} >
<div>
<Header />
<Routes>
<Route path="/" component={Container1} />
<Route path="/component1" component={Component1} />
<Route path="/component2" component={Component2} />
<Route path="/component3" component={Component3} />
</Routes>
</div>
</Router>
</div>
)
}
}

You are using react router v6 and in v6 you have to wrap all of your route's in <Routes>...</Routes> tag.
//react router import
import { Router, Route, Routes } from 'react-router'; // Make sure to import ----Routes----
class Routes extends Component {
render() {
return (
<div>
<Router history={history.location} navigator={history} >
<div>
<Header />
<Routes>
<Route path="/" component={Container1} />
<Route path="/component1" component={Component1} />
<Route path="/component2" component={Component2} />
<Route path="/component3" component={Component3} />
</Routes>
</div>
</Router>
</div>
)
}
}
export default Routes;
And you can't add anything between <Routes>...</Routes> except <Route />.

React-router component does not update on <Link> navigation

As many other people have had the same issue, I'm struggling to interact with a <Link> element to change routes and render a new component. I am able to click on the link and the path for my application changes in my redux store, but no component gets updated. My root component does not seem to respond to shouldComponentUpdate, even though props are changing and the full setup is similar to how connected-react-router describes it needs to be.
To test
The sample code (git repo) is a MVP (minimum viable product) - it can easily replicate the problem I am seeing.
git clone https://github.com/reZach/electron-webpack-template.git
cd electron-webpack-template
npm i
npm run dev
If you'd prefer to look at files, I've included the necessary files below
index.js
import React from "react";
import ReactDOM from "react-dom";
import Root from "../app/components/core/root";
import store, { history } from "./redux/store/store";
ReactDOM.render(
<Root store={store} history={history}></Root>,
document.getElementById("root")
);
store.js
import { configureStore, getDefaultMiddleware } from "#reduxjs/toolkit";
import { createBrowserHistory } from "history";
import { routerMiddleware } from "connected-react-router";
import rootReducer from "../reducers/rootReducer";
export const history = createBrowserHistory();
const store = configureStore({
reducer: rootReducer(history),
middleware: [...getDefaultMiddleware(), routerMiddleware(history)]
});
export default store;
root.jsx
import React from "react";
import { ConnectedRouter } from "connected-react-router";
import { Provider, connect } from "react-redux";
import Routes from "../core/routes";
class Root extends React.Component {
render() {
return (
<Provider store={this.props.store}>
<ConnectedRouter history={this.props.history}>
<Routes></Routes>
</ConnectedRouter>
</Provider>
);
}
}
export default Root;
routes.jsx
import React from "react";
import { Switch, Route } from "react-router";
import routes from "../../constants/routes";
import App from "../app/app";
import Page2 from "../page2/page2";
class Routes extends React.Component {
render() {
return (
<Switch>
<Route path={routes.ENTRY} component={App}></Route>
<Route path={routes.MAIN} component={Page2}></Route>
</Switch>
);
}
}
export default Routes;
routes.json
{
"ENTRY": "/",
"MAIN": "/main"
}
package.json
{
"name": "electron-webpack-template",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npm run build-dev-webpack && npm run start-dev-app",
"build-dev-webpack": "webpack --mode development --config ./app/configs/webpack/webpack.config.js",
"start-dev-app": "cross-env NODE_ENV=development electron app/main.js",
"prod": "npm run build-prod-webpack && npm run start-prod-app",
"build-prod-webpack": "webpack --mode production --config ./app/configs/webpack/webpack.config.js",
"start-prod-app": "cross-env NODE_ENV=production electron app/main.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/reZach/electron-webpack-template.git"
},
"keywords": [],
"author": "",
"license": "GPL-3.0-only",
"bugs": {
"url": "https://github.com/reZach/electron-webpack-template/issues"
},
"homepage": "https://github.com/reZach/electron-webpack-template#readme",
"devDependencies": {
"#babel/core": "^7.7.7",
"#babel/plugin-proposal-json-strings": "^7.7.4",
"#babel/plugin-transform-react-jsx": "^7.7.7",
"#babel/preset-env": "^7.7.7",
"babel-loader": "^8.0.6",
"cross-env": "^6.0.3",
"csp-html-webpack-plugin": "^3.0.4",
"devtron": "^1.4.0",
"electron": "^7.1.7",
"html-webpack-plugin": "^3.2.0",
"lockfile-lint": "^3.0.5",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {
"#reduxjs/toolkit": "^1.2.1",
"connected-react-router": "^6.6.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5"
}
}

This is probably because there is no "exact" word on the Entry route (for App component):
<Switch>
<Route exact path={routes.ENTRY} component={App}></Route>
<Route path={routes.MAIN} component={Page2}></Route>
</Switch>

The solution to these routing woes was to add the exact attribute as drazewski suggested, and in addition change the history object I was using for my <ConnectedRouter>. The problem was caused by me using createBrowserHistory and the fact that I am not using a webserver in my application to host my files. The default path of my application when loading my app was file:///C:/...index.html. This is the path value when I looked in my Redux store when the app loaded.
I had to change to use createHashHistory instead, which works when you are not hosting a webserver to host your app. The default path when using createHashHistory is a /, which matches routes.ENTRY in my routes.jsx file and allows me to navigate to /main. Apparently, you can't navigate to another path unless your path matches an existing path you define in your <Route>s (this is what I think what was happening as I described my problem above - although I don't know why my home/page1 component rendered at all then...).
Here
are good references that pointed me in the direction that I had to change my history (here and here). In addition to those links, here is a good blog post (mirror) explaining more in-detail the various types of history for react-router.
new routes.jsx
import React from "react";
import { Switch, Route } from "react-router";
import routes from "../../constants/routes";
import App from "../app/app";
import Page2 from "../page2/page2";
class Routes extends React.Component {
render() {
return (
<Switch>
<Route exact path={routes.ENTRY} component={App}></Route> <!-- updated -->
<Route path={routes.MAIN} component={Page2}></Route>
</Switch>
);
}
}
export default Routes;
new store.js
import { configureStore, getDefaultMiddleware } from "#reduxjs/toolkit";
import { createHashHistory } from "history"; // < updated!
import { routerMiddleware } from "connected-react-router";
import rootReducer from "../reducers/rootReducer";
export const history = createHashHistory(); // < updated!
const store = configureStore({
reducer: rootReducer(history),
middleware: [...getDefaultMiddleware(), routerMiddleware(history)]
});
export default store;

React Redux Router rendering nothing in production

This is bugging me so much I had to ask my first question on SO. I'm building a React app with Redux and I'm trying to incorporate React Router. In development it works as expected but once I build it, nothing renders inside the root div in the browser. This problem started only after I added Router. Previous dist versions worked just fine.
Here's the code:
index.js
import React from "react"
import ReactDOM from "react-dom"
import Root from "./Root"
import { Provider } from "react-redux"
import PropTypes from 'prop-types'
import store from "./store/store"
ReactDOM.render(
<Root store={store} />,
document.getElementById("root")
)
Root.js
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { Provider } from "react-redux"
import { BrowserRouter as Router, Route } from 'react-router-dom'
const Root = ({ store }) => (
<Provider store={store}>
<Router>
<Route path="/" component={App}/>
</Router>
</Provider>
)
export default Root;
App.js
import React from "react"
import ReactDOM from "react-dom"
import { hot } from "react-hot-loader";
import * as React from "react";
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from './actions/actions';
import {windowResize} from './actions/windowResize';
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect } from 'react-router-dom'
import HomePage from './views/HomePage';
import ComparePage from './views/ComparePage';
import CartPage from './views/CartPage';
import ProductPage from './views/ProductPage';
import WishlistPage from './views/WishlistPage';
import "./styles/theme.sass";
function mapDispatchToProps(dispatch) {
return bindActionCreators({
resize: windowResize
}, dispatch);
}
class App extends React.Component {
// eslint-disable-line react/prefer-stateless-function
constructor(props) {
super(props);
this.state = {
width: window.innerHeight,
height: window.innerWidth
}
this.updateDimensions = this.updateDimensions.bind(this);
}
updateDimensions() {
let w = window,
d = document,
documentElement = d.documentElement,
body = d.getElementsByTagName('body')[0],
width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
height = w.innerHeight || documentElement.clientHeight || body.clientHeight;
this.setState({ width: width, height: height });
this.props.resize([width, height]);
}
//lifecycle methods
componentWillMount() {
this.updateDimensions();
}
componentDidMount() {
window.addEventListener("resize", this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
// - - render - -
render() {
return (
<Switch>
<Route path="/product" component={ProductPage} />
<Route path="/compare" component={ComparePage} />
<Route path="/wishlist" component={WishlistPage} />
<Route path="/cart" component={CartPage} />
<Route path="/" exact component={HomePage} />
</Switch>
)
}
}
export default hot(module)(connect(null, mapDispatchToProps)(App))
I'm pasting the whole code as It's possible I'm doing something really dumb and can't see it. I seem to have tried everything I could think of including using withRouter. In case there are some conflicts I don't know about, here's the relevant part of my package.json
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-hot-loader": "^4.0.1",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.0",
I'm out of ideas of what may be causing the issue. There's something about router or Redux basics that I didn't fully grasp. Will appreciate some help.

OK, after digging through some forum threads and reading links provided by #MurliPrajapati and #RaghavGarg I think I managed to fix the issue. As suggested, the fix was to provide the prop basename to BrowserRouter. So in App.js changed render method looks like this now:
render() {
return (
<Router basename={"my-repo-name"} >
<Switch>
<Route path={"/product"} component={ProductPage} />
<Route path={"/compare"} component={ComparePage} />
<Route path={"/wishlist"} component={WishlistPage} />
<Route path={"/cart"} component={CartPage} />
<Route path={"/"} exact component={HomePage} />
<Redirect from={"*"} to={"/"} />
</Switch>
</Router>
)
}
Of course, as #MurliPrajapati and #RaghavGarg mentioned, this is for production and deployment to GH Pages. If I was to serve the app from my private domain this wouldn't be necessary.
My additional thought might be that there is no simple way of getting this to work on local machine after the build but it does work when deployed to Github Pages so I guess that's good enough for me.
Also to be on the safe side I wrapped relevant components in withRouter function from react-router-dom, I'm not sure that was necessary though.

this.props.children undefined when using react-router-redux

I have followed the react-router-redux example on the github page, but when I try to pass {this.props.children} to the IndexRoute and I try to log it, it's undefined.
The only error I get through the console is Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored, which by googling this error, it's just one of those errors that people say just ignore it since it doesn't affect any of the code (for some reason).
package.json
....
"react": "^0.14.7",
"react-redux": "^4.4.0",
"react-router": "^4.0.0",
"react-router-dom": "^4.0.0",
"react-router-redux": "^4.0.8",
"redux": "^3.3.1",
"redux-thunk": "^1.0.3"
...
routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Items from "./components/Items"
import App1Container from "./containers/App1Container";
import ItemDetailContainer from "./containers/ItemDetailContainer";
export default (
<Route path="/" component={App1Container}>
<IndexRoute component={Items} />
<Route path="i/:id" name="item-detail" component={ItemDetailContainer} />
</Route>
);
App.jsx
import React from "react"
import { render } from "react-dom"
import {
createStore,
compose,
applyMiddleware,
combineReducers,
} from "redux"
import { Provider } from "react-redux"
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
import { createBrowserHistory } from 'history';
import thunk from 'redux-thunk'
import * as reducers from './reducers'
import routes from './routes';
let finalCreateStore = compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);
let reducer = combineReducers({
...reducers,
routing: routerReducer
});
let store = finalCreateStore(reducer);
const history = syncHistoryWithStore(createBrowserHistory(), store);
const router = (
<Provider store={store}>
<Router history={history}>{routes}</Router>
</Provider>
);
render(router, document.getElementById('App'));
App1Container.jsx
import React from "react"
import Radium from "radium"
import { connect } from "react-redux"
import Headline from "../components/Headline"
#connect(state => ({
items: state.items,
}))
#Radium
export default class App1Container extends React.Component {
render() {
console.log(this.props.children)
return (
<div>
{/* just a an h1 tag with some text in it */}
<Headline/>
{this.props.children}
</div>
)
}
}
App1Container would render the Headline component successfully but not this.props.children.

In react-router v4 you no longer nest routes.
<Route path="/" component={App1Container}>
<IndexRoute component={Items} />
<Route path="i/:id" name="item-detail" component={ItemDetailContainer} />
</Route>
Move your routes into your App1Container considering you always want it displayed. Then in your App1Container, add routes as follows:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
<Switch>
<Route path="/" exact component={ Items } />
<Route path="/i/:id" name="item-detail" component={ ItemDetailContainer } />
</Switch>
</Router>

react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined

I've been having some trouble with react router (i'm using version^4.0.0).
this is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { Router, Route, Link, browserHistory } from 'react-router';
ReactDOM.render(
<Router history={browserHistory} >
<Route path="/" component={App} />
</Router>,
document.getElementById('root')
);
the App.js is just anything. i'm posting the basic one here, cause it's not the problem (i believe)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
and this is what happens when i check the console log
Router.js:43 Uncaught TypeError: Cannot read property 'location' of undefined
at new Router (Router.js:43)
at ReactCompositeComponent.js:295
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294)
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188)
at Object.mountComponent (ReactReconciler.js:46)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
oh, and this is the package.json just in case
{
"name": "teste2",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^4.0.0"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
i've been checking this on other places, but i didn't find a way to solve it.
Thank you guys very much for your patience and help!!

You're doing a few things wrong.
First, browserHistory isn't a thing in V4, so you can remove that.
Second, you're importing everything from react-router, it should be react-router-dom.
Third, react-router-dom doesn't export a Router, instead, it exports a BrowserRouter so you need to import { BrowserRouter as Router } from 'react-router-dom.
Looks like you just took your V3 app and expected it to work with v4, which isn't a great idea.

Replace
import { Router, Route, Link, browserHistory } from 'react-router';
With
import { BrowserRouter as Router, Route } from 'react-router-dom';
It will start working.
It is because react-router-dom exports BrowserRouter

I've tried everything suggested here but didn't work for me. So in case I can help anyone with a similar issue, every single tutorial I've checked is not updated to work with version 4.
Here is what I've done to make it work
import React from 'react';
import App from './App';
import ReactDOM from 'react-dom';
import {
HashRouter,
Route
} from 'react-router-dom';
ReactDOM.render((
<HashRouter>
<div>
<Route path="/" render={()=><App items={temasArray}/>}/>
</div>
</HashRouter >
), document.getElementById('root'));
That's the only way I have managed to make it work without any errors or warnings.
In case you want to pass props to your component for me the easiest way is this one:
<Route path="/" render={()=><App items={temasArray}/>}/>

location from the useLocation hook or from the useHistory hook is referencing the BrowserRouter from react-router-dom
So only call useLocation and useHistory from children components so this code below will work
#src/index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter,Switch, Route, } from "react-router-dom";
ReactDOM.render(
<>
<BrowserRouter>
<Switch>
<Route>
<App />
<Route>
</Switch>
</BrowserRouter>
</>,
document.getElementById("root")
);
then in your App.js you can get location by the useLocation hook or useHistory
since it's a child of the BrowserRouter it will be defined
eg. const { location} = useHistory();
eg. const loction = useLocation();

so if you need want use this code )
import { useRoutes } from "./routes";
import { BrowserRouter as Router } from "react-router-dom";
export const App = () => {
const routes = useRoutes(true);
return (
<Router>
<div className="container">{routes}</div>
</Router>
);
};
// ./routes.js
import { Switch, Route, Redirect } from "react-router-dom";
export const useRoutes = (isAuthenticated) => {
if (isAuthenticated) {
return (
<Switch>
<Route path="/links" exact>
<LinksPage />
</Route>
<Route path="/create" exact>
<CreatePage />
</Route>
<Route path="/detail/:id">
<DetailPage />
</Route>
<Redirect path="/create" />
</Switch>
);
}
return (
<Switch>
<Route path={"/"} exact>
<AuthPage />
</Route>
<Redirect path={"/"} />
</Switch>
);
};

appBar: {
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
backgroundColor: '#fff' // add the styles here
}
if you already have appBar at useStyles you can add the styles you just want.

It should be
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom;
Make sure they follow each other in that sequence.
That works for me though