Develop Reference

Adding Pages Router Error - Property 'pathname' undefined

I've tried browsing a few similar queries but haven't been able to solve my issue. I downloaded a template (am new to React) where the single-page application was entirely built in App.js. I've since been trying to add functionality to add additional pages - but keep getting the error "React Router: Cannot read property 'pathname' of undefined."
My App.js
import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Mint from './components/pages/Mint'
import LandingPage from './components/pages/LandingPage'
const App = () => {
return (
<Router>
<Routes>
<Route exact path="/" element={<Mint/>}/>
<Route path="/home" element={<LandingPage/>}/>
</Routes>
</Router>
);
}
export default App;
My index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store from "./redux/store";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { ConnectedRouter } from 'react-router-redux';
import "./styles/reset.css";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
reportWebVitals();
Can confirm upon loading that the "Mint" page loads properly. But if I try and switch the exact path to LandingPage in App.js it'll give that error.
Any help would be greatly appreciated!

React Router rendering blank page

I have this issue alot using react router, it just makes my whole app blank.
the ] at the end was a typo and wouldn't render a blank page, it would just give some normal error
This is my App.js:
import './App.css';
import { BrowserRouter as Route, Router, Routes, Link } from 'react-router-dom';
import Home from './components/home';
import About from './components/about';
import Projects from './components/projects';
function App() {
return (
<Router>
<header>
<div className='logo'>MyPortfolio</div>
<h2>Eshwar Tangirala</h2>
<ul>
<Link><li>Home</li></Link>
<Link to="/about"><li>About</li></Link>
<Link to="/projects"><li>Projects</li></Link>
</ul>
</header>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
<Route path="projects" element={<Projects/>}/>
</Routes>
</Router>
);
}
export default App;
My other components, like home, about, and projects just have an H1 with their name on it.

You have mixed up your imports:
import { BrowserRouter as Route, Router, Routes, Link } from 'react-router-dom';
You've:
Imported a BrowserRouter as the Route component
Imported the low-level Router which is missing some required props to be passed to it
Fix the imports:
Import BrowserRouter as Router
Import the Route component
Correct imports
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
And if not a copy/paste typo, remove the trailing ] on the App export:
export default App;] to export default App;.

If the code running in your editor is the same as the above snippet, you have a typo in your export (the extra ])
export default App;

Check your default App export remove this ] you have an array ] closing tag.
Your default export is should be like this:
export default App;
Not
export default App;]

Fix the imports as stated above and then try to wrap your entire app in the browserRouter like this on the index.js, not the app.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
(it might also be an issue with the react-router-dom version, since some of them use Switch instead of Routes , which one are you using? is something logged on the console when you run your app?)

Module not found: Can't resolve './pages' Failed to compile

Hi I am importing a home component stored in pages folder. Adding it to the Router of my application
Get the error below
./src/App.js Module not found: Can't resolve './pages'
But I seem to have done it correctly?Module not found: Can't resolve './pages'
Please help me why its saying module not found when its there
App.JS CODE
import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { Route } from 'react-router-dom';
import Home from "./pages";
function App() {
return (
<Router>
<Switch>
<Route path="/browse">
<p>I will be the sign in page</p>
</Route>
<Route path="/signin">
<p>I will be the sign up page</p>
</Route>
<Route path="/browse">
<p>I will be the browse page</p>
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
export default App;
home.js CODE
import React from 'react';
export default function Home() {
return (
<h1>Hello Sambulo</h1>
)
}

When you import from './pages' the default behavior is to look for for a file named index.js in the ./pages folder.
If you want to import home.js you have to change the import to
import Home from "./pages/home.js";
the .js at the end is optional as .js is the default file extension for imports

According to React component name convention, it is better to use Home.js as the file name.
So this one is also working.
import Home from "./pages/Home";
Component name should be in PascalCase.
For example, MyComponent, MyChildComponent etc.

Navigating from App.js to Places.js

I am a newbie to React.I am playing around with it quite a bit.Now I want to navigate from App.js to Places.js .I agree that it can be done using React-router but I could not yet figure that out successfully. I need help in this regard.Having said this I tried few combinations using HashRouter, Route and Navlink but all efforts were in vain.
Here is my App.js
import {Link,Router} from 'react-router-dom';
import Places from './Places';
import React, { Component } from "react";
import { Card} from 'semantic-ui-react';
class App extends Component {
render() {
return (
<Router>
<div className ="ui four stackable two column grid">
<div className="column">
<Card
as = {Link} to = '/Places'
header='Places'
description='Click here to get list of places.'
/>
</div>
...
</div>
</Router>
);
}
}
And here is my Places.js
import { Card} from 'semantic-ui-react';
import axios from 'axios';
export default class Places extends React.Component {
...
Basically I have App.js with 4 UI cards.When I click each one of them it should load the contents of the corresponding js files.Will this qualify as SPA?

To define your routes. You have to import first react-router.
In your file app.js, you have to cut the content in another file (grid.js for example). 'App' will be the main container of your application
Then you will create a file routes.js and describe your routes:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/app';
import Grid from './components/Grid';
import Places from './components/Places';
export default (
<Route path="/" component={App}>
<IndexRoute component={Grid} />
<Route path="places" component={Places} />
</Route>
);
Here, with IndexRoute, you say that your default route will load 'Grid' so the list of cards.
Then, in app.js file, you write in your render function {this.props.children} where you want to display your elements 'Grid' and 'Places'.
Finally, in your file 'index.js', you will import your routes, and the router:
import { Router, browserHistory } from 'react-router';
import routes from './routes';
And, in the function ReactDOM.render, define your routes:
ReactDOM.render(
<Router history={browserHistory} routes={routes} />
, document.querySelector('.container'));

You can handle routing by keeping your routes in separate file and handle component rendering from there.
import React from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import {render} from 'react-dom';
import Places from '../Places.js';
render(
<Router history={browserHistory}>
<Route path='/' component={App}>
<Route path='/Places' component={Places}></Route>
</Route>
</Router>, document.getElementById('app')
);
When you'll navigate to '/Places' route, it will render Places component.

How do you create a multi-page application using React?

I have just started using React and have created a new project using create-react-app. I have made a homepage which works. However, I want to add another page to this application. I have a button on the homepage which I want to redirect to another page when clicked. Can someone please give a simple explanation to do this?
I do know that there are other questions that ask this, but they don't seem to apply to create-react-app, or I don't understand them since I am just starting out with React.
Here is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render((
<Router>
<Route path = "/" component = {App} />
</Router>
), document.getElementById('root'));
registerServiceWorker();

You need to use react-router-dom library. Navigation between pages is really easy in react.
import React from 'react';
import {render} from 'react-dom';
import {Router, Route, hashHistory, BrowserRouter} from 'react-router-dom'
render((
<BrowserRouter basename="/" history={hashHistory}>
{routes()}
</BrowserRouter>
), document.getElementById('app'));
Then in your home page, you can have something similar to below page:
import React, { Component } from 'react';
import { Switch, Route, BrowserRouter, hashHistory } from 'react-router-dom';
import './MainLayout.css';
import ReportNavComponent from './ReportNavComponent';
import ListOfUsers from '../reports/ListOfUsers/ListOfUsers';
import ListOfProviders from '../reports/ListOfProviders/ListOfProviders';
import ListOfDiagnosis from '../reports/ListOfDiagnosis/ListOfDiagnosis';
import ListOfNewPatients from '../reports/ListOfNewPatients/ListOfNewPatients';
import NumberOfAdmissions from '../reports/NumberOfAdmissions/NumberOfAdmissions';
...
<div className="reportContent">
<Switch>
<Route path="/ListOfUsers" component={ListOfUsers} />
<Route path="/ListOfProviders" component={ListOfProviders} />
<Route path="/ListOfDiagnosis" component={ListOfDiagnosis} />
<Route path="/ListOfNewPatients" component={ListOfNewPatients} />
<Route path="/NumberOfAdmissions" component={NumberOfAdmissions} />
<Route component={ListOfUsers} />
</Switch>
</div>

reacter-router-dom is the way to go about routing. But if you have just started with react, why don't start with a boiler-plate project and see how the components and other entities interact?
You should definitely look at davezuko's react-redux starter kit and experiment with it.