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?)
Related
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!
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'
I am trying to make default route in my routes.js file using react-router-dom package.
This is my code:
import React from 'react';
import { Route, Switch, Router, Redirect, BrowserRouter } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import MainContainer from './containers/main';
const Routes = () => (
<BrowserRouter>
<Switch>
<Route path='/' component={MainContainer} />
<Redirect from='/' exact to='/main'/>
</Switch>
</BrowserRouter>
);
export default Routes;
But it doesn't redirect / to /main. Basically, whenever user goes to / it should redirect to /main. Also, the /main should be starting point (homepage) when I build my app. I am using create-react-app boilerplate CLI.
Thanks.
To get the effect that you want, you should, first of all, move the Redirect to the top of the Switch.
Second, you have to change the "to" property for your Route to /main. Since that is the location that you want to load your MainContainer component for.
Like so:
import React from 'react';
import { Route, Switch, Router, Redirect, BrowserRouter } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import MainContainer from './containers/main';
const Routes = () => (
<BrowserRouter>
<Switch>
<Redirect exact from='/' to='/main'/>
<Route path='/main' component={MainContainer} />
</Switch>
</BrowserRouter>
);
export default Routes;
In the code you posted, all locations go to the Route component because they all contain /. So the switch will never hit the Redirect.
In my example, the Redirect will get hit when the location is exactly /. It will then redirect the user to /main, where the Switch will hit the Route which loads your MainContainer component.
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.
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.