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.
Related
This question already has answers here:
Upgrading react-router-dom from Switch to Route
(1 answer)
React App goes blank after importing React-Router-Dom
(3 answers)
Closed last month.
I want to use React Router but it keeps showing me a blank page. Here is my code:
Routering.js
import React from 'react'
import { HashRouter as Router,Routes,Route } from 'react-router-dom';
import App from './components/app.js'
import Login from './components/login.js'
import NotFound from './components/NotFound.js';
const Routering = ()=> {
<Router>
<Routes>
<Route path="/login" element={Login}/>
<Route element={NotFound}/>
<Route exact path="/" element={App}/>
</Routes>
</Router>
}
export default Routering;
index.js:
import { createRoot } from 'react-dom/client';
import React from 'react';
import ReactDOM from 'react-dom';
import Routering from './Routering.js';
import Login from './components/login.js';
import App from './components/app.js';
import './css/app.scss';
createRoot(document.getElementById('root')).render( <Routering />)
I am using "React Router V6", can anyone tell me what is the problem? Thanks for all the helpers.`
In the element, you should have <Login /> and <App />, etc.
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 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
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.