Develop Reference

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?)

Error: 'Action' is not exported from 'history'

I haven't imported action anywhere and it says 'Action' is not exported from 'history'. I don't even know what action is.
info: I reinstalled the previous version of history as I was having problems with routing when my history was updated
Here is my code:
import React from 'react';
import { render } from 'react-dom';
import './App.css';
import Navbar from "./components/Navbar/Navbar";
import Home from './components/Pages/Home';
import Intro from './components/Pages/Intro';
import LogIn from './components/Pages/LogIn';
import SignUp from './components/Pages/SignUp';
import Recomendations from './components/Pages/Recomendations';
import Reviewed from './components/Pages/Reviewed';
import AboutUs from './components/Pages/AboutUs';
import Bookmarks from './components/Pages/Bookmarks';
import Error from './components/Pages/Error';
import { Router, Switch, Route } from 'react-router-dom';
function App() {
return (
<div>
<Navbar />
<Router>
<Route exact path='/' component={Intro} />
<Route path='/intro' component={Intro} />
<Route path='/error' component={Error} />
</Router>
</div>
);
}
export default App;

Check the version of history package, and make sure it is somewhat recent. Someone else had a similar problem: Getting error when try to use React Router v6: Attempted import error: 'Action' is not exported from 'history'

React router dom full page reload

I have just created a fresh react project with create-react-app . for navigation i am using react-router-dom in my index.js file i have wraped App.js components with and in App.js i am using switch component to load pages based on changes in URL . its working fine , the problem is that it loads whole page when i change url from /auth to / which is not desired behaviour
Following is my index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter forceRefresh={false}>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();
Following is my App.js file
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
import HomePage from "./pages/home";
import AuthPage from "./pages/auth";
function App() {
return (
<div className="App">
<Switch>
<Route path="/auth" render={(props) => <AuthPage {...props} />} />
<Route path="/" exact render={(props) => <HomePage {...props} />} />
</Switch>
</div>
);
}
export default App;
desired behaviour is that when i change url in the browser from keyboard it should not reload whole page . it should just reload the App div in App.js

"Home is not defined" error using React JS

Here's my code for my App.js :
import './App.css';
import { BrowserRouter as Router, Route, } from "react-router-dom";
import Navbar from './Components/Navbar';
import Education from './contents/Education';
function App() { return (
<Router>
{/* route navbar */}
<div className="App">
<Navbar />
{/* route 2 home */}
<Route exact path="/Home">
< Home />
</Route>
{/* Route for About.js contents */}
<Route path="/About">
< About />
</Route>
{/* route to widecard */}
<Route path="/Education">
<Education />
</Route>
</div>
</Router>
)
}
export default App;
When I run npm start in my terminal I get this error:
./src/App.js
Line 18:7: 'Home' is not defined react/jsx-no-undef
Line 26:7: 'About' is not defined react/jsx-no-undef
I have a Home.js and an About.js... I'm still learning react so if this seems like a simple fix I'm sorry in advance! Please let me know if any more information needs to be provided.
Thanks everyone!

You don't import Home or About at the top of the file. IF you import those in, I think you'll be good to go.
Also < Home /> shouldn't have a space between the open bracket and the name. Should be <Home />.

You need to import the componant (Home and About) so you can use then.
Home.js and About.js should contain an export , and App.js should contain
import Home from 'path/to/Home/Home' //(you dont need to write the .js)
And same with About

As with using any component it must first be exported then imported. As it appears that the later was overlooked in your code.
import About from '..relative path to -> /About'
import Home from '..relative path to -> /Home'

When you import something from other modules be sure to mention that function .I assume you know this fact but these mistakes can happen
i.e
import Home from "./pages/home/Home"

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.