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"
Related
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 unable to go to another page because this.props.history appears undefined. Below is a screenshot of the error that I see. Note that I rendered my welcome component using this.props.history.push("/welcome") from the login component and it worked fine then.
This is my App.js
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Login from "./Components/Login";
import "./App.css";
import Signup from "./Components/Signup";
import Welcome from "./Components/Welcome";
import RecruiterPage from "./Components/Common/RecriterPage";
function App() {
return (
<Router>
<div className="App">
<Route exact path="/signup" component={Signup} />
<Route exact path="/" component={Login} />
<Route exact path="/welcome" component={Welcome} />
<Route exact path="/recruiter" component={RecruiterPage} />
</div>
</Router>
);
}
export default App;
My best guess is that the component you are trying to navigate from is a child component of a parent component that may or may not have access to history, hence has no access to the history props.
There are two ways to solving this:
1. Pass history as a props from the parent to the child component OR
2. Do this on the said component:
import { withRouter } from 'react-router-dom'
...and when exporting the component, wrap it in withRouter e.g.
export default withRouter(ComponentName)
I am learning React Routing and I am watching this tutorial:
https://www.youtube.com/watch?v=1iAG6h9ff5s
Its 2016 tutorial so I suppose something changed because 'react-router' not working anymore and I am supposed to use 'react-router-dom'.
I found that I must uninstall 'history' and 'react-router' and use 'react-router-dom' instead, but It not working as expected when I change it.
How to edit this to make it working with 'react-router-dom'?
import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, IndexRoute, hashHistory} from "react-router";
import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";
const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Featured}></IndexRoute>
<Route path="archives" component={Archives}></Route>
<Route path="settings" component={Settings}></Route>
</Route>
</Router>,
app);
My edit:
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";
const app = document.getElementById('app');
ReactDOM.render(
<Router>
<Route path="/" component={Layout}>
<Route path="/featured" component={Featured}/>
<Route path="/archives" component={Archives}/>
<Route path="/settings" component={Settings}/>
</Route>
</Router>,
app);
Also pushState not working...
Layout.js
import React from "react";
import {Link} from "react-router-dom";
export default class Layout extends React.Component {
navigate() {
this.props.history.pushState(null, "/");
}
render() {
return (
<div>
{this.props.children}
<h1>Welcome</h1>
<button onClick={this.navigate.bind(this)}>Featured</button>
</div>
);
}
}
When I click to Link url change, but content is not loaded... Also when I access url I get "Cannot GET" error
After watching the video, you probably want something like this. At first this would not be so easy to understand but after seeing a few of them you digest it. First you render your Layout with one Route. Then in this top route, you use other Routes to setup your components.
We usually use exact props for a top root like /. If you don't setup your app like that, for example all your routes is in your top Router config, then to use a route something like /featured we must have exact prop. If we don't use it Router always hit / path and we always see the top level component.
But, in your situation, you want other components to be routed in your top level component. So, we drop exact prop here.
Also you can use push to change history.
Update
After think about the navigation button named "Featured", I think you want the Featured component rendered as default one here. When hit the button again you will come back to Featured one. I've changed the code according to that. In this version, we add a / route in the Layout and point it to Featured. So, when we come here it is rendered. But, we use exact prop here since we also want routes like "/featured", "/archives" and "/settings".
export default class Layout extends React.Component {
navigate = () => this.props.history.push("/");
render() {
return (
<div>
<h1>Welcome</h1>
<Link to="/featured">Featured</Link>
<Link to="/archives">Archives</Link>
<Link to="/settings">Settings</Link>
<br />
<button onClick={this.navigate}>Featured</button>
<Route exact path="/" component={Featured} />
<Route path="/featured" component={Featured} />
<Route path="/archives" component={Archives} />
<Route path="/settings" component={Settings} />
<div>
Some other info.
</div>
</div>
);
}
}
const app = document.getElementById('root');
ReactDOM.render(
<Router>
<Switch>
<Route path="/" component={Layout} />
</Switch>
</Router>,
app);
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'm migrating a site in ASP.NET MVC to REACT. And for pagination i have created a component in React.
Issue i'm facing is with Routing for the pagination URLs. React Router is not able to detect that the URL is different when i click on a pagination URL
Let me explain:
app.js code:
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import allReducers from '../reducers/index';
import {Provider} from 'react-redux';
import ReduxPromiseMiddleware from 'redux-promise';
import { BrowserRouter, Route } from 'react-router-dom';
import Main from './main';
import Layout from './layout';
const app = document.getElementById('root');
const store = createStore(allReducers, applyMiddleware(ReduxPromiseMiddleware));
ReactDOM.render(<Provider store={store}>
<BrowserRouter>
<Layout>
<Main/>
</Layout>
</BrowserRouter>
</Provider>
,app);
Main component render:
render(){
return(
<main>
<Switch>
<Route exact path='/' component={HomePage}/>
<Route path='/posts' component={PostsRouter} />
<Route path='/studies' component={StudiesPage} />
</Switch>
</main>
);
}
PostsRouter component:
const PostsRouter = () => (
<Switch>
<Route exact path='/posts' component={PostsPage} />
<Route path='/posts/:page' component={PostsPage} />
</Switch>
);
For both /posts and /posts/2 i need the component to be PostsPage.
Lets say i'm at /home. Now i click a posts link and URL changes to /posts. Now if i click /posts/2 link, nothing happens. React Router doesn't detect that the URL is different.
And a weird thing i noted is that if i change the component:
<Route path='/posts/:page' component={PostsPage} />
to
<Route path='/posts/:page' component={StudiesPage} />
then React Router routes me to StudiesPage component if i click on /posts/2 link when i'm on /posts URL.
May be i'm missing something obvious. But i haven't been able to figure out a way after lots of attempts.
I suspect Sergey's comment was right, that's what my problem ended up being. I was fetching data within componentDidMount() but didn't realise that in order to actually update it with new data when the next page link was clicked, I needed to do the same thing inside componentWillReceiveProps(). You can see my full source here but the biggest key part was this:
componentWillReceiveProps(nextProps) {
this.setState({
loaded: false
});
this.fetchMediaItems(nextProps.match.params.page);
}
componentDidMount() {
this.fetchMediaItems(this.props.match.params.page);
}
componentWillReceiveProps() receives the new properties, including page number, when you click on the link to page 2, so you need to do whatever inside there to update with the new state.