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.
Related
Im routing a page to the root, but its showing up as a blank page, no matter what js file I use. Not sure whats wrong, havent used react since last year but looks like they've updated react-router-dom so it doesnt use Switch anymore. Anyone know the correct syntax so the page shows up? Here are the files:
WebRoutes.js
import React from "react";
import { Routes, Route } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
// Webpages
import App from './App';
import Welcome from './welcome';
import SignUp from './Signup'
export default function WebRoutes() {
return (
<Routes>
<Route path='/'>
<Welcome />
</Route>
</Routes>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WebRoutes from './WebRoutes';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<WebRoutes />
</React.StrictMode>,
document.getElementById('root')
);
In react-router-dom#6 the Route components don't render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes.
export default function WebRoutes() {
return (
<Routes>
<Route path='/' element={<Welcome />} />
</Routes>
);
}
Ensure that you have rendered a router around your app.
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<WebRoutes />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
Im routing a page to the root, but its showing up as a blank page, no matter what js file I use. Not sure whats wrong, havent used react since last year but looks like they've updated react-router-dom so it doesnt use Switch anymore. Anyone know the correct syntax so the page shows up? Here are the files:
WebRoutes.js
import React from "react";
import { Routes, Route } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
// Webpages
import App from './App';
import Welcome from './welcome';
import SignUp from './Signup'
export default function WebRoutes() {
return (
<Routes>
<Route path='/'>
<Welcome />
</Route>
</Routes>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WebRoutes from './WebRoutes';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<WebRoutes />
</React.StrictMode>,
document.getElementById('root')
);
In react-router-dom#6 the Route components don't render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes.
export default function WebRoutes() {
return (
<Routes>
<Route path='/' element={<Welcome />} />
</Routes>
);
}
Ensure that you have rendered a router around your app.
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<WebRoutes />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
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'm new to react I'm using react-router ^6.0.2 and my problem is I created a component for the router then I called this component in the index file but when I add another component to the index it gets rendered in all the routes with the navbar in every single route I want the navbar to be rendered in all components but not the other component in the index file sorry for my bad English
index file:
import React from "react";
import ReactDOM from "react-dom";
import "../src/css/style.css";
import Router from "./Components/Router";
const App =()=>{
return(
<div>
<Router/> {/* i want this to get renderd in all routes */}
<Test/> {/*i want this to get renderd only in home page */}
</div>
)
}
ReactDOM.render(<App/>,document.getElementById("root"));
router component :
import { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route} from "react-router-dom";
import NavBar from "./NavBar";
import About from "./About";
import Product from "./Product"
import Sp from "./Sp"
import Contact from "./Contact"
class Router extends Component{
render(){
return(
<BrowserRouter>
<NavBar/>
<Routes>
<Route path="about" element={<About/>}/>
<Route path="product" element={<Product/>}/>
<Route path="sp" element={<Sp/>}/>
<Route path="contact" element={<Contact/>}/>
</Routes>
</BrowserRouter>
)
}
}
export default Router
As it is right now, you don't have a home page. A home page is essentially a <Route path='/' /> Make one, and put your <Test/> component in it. Let me know if you're still struggling.
Put test component in routes component and send it's path as "home"
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