I want to perform history.push
but it is not working.
i have used withRouter , History etc.
can anyone help me to resolve it
register=(e)=>{
e.preventDefault()
this.props.history.push('/dashboard')
}
import React from 'react';
import './App.css';
import Login from './component/login/login'
import Header from './component/header/header'
import { createBrowserHistory } from 'history';
import { Router, Route, Switch } from 'react-router-dom'
const his=createBrowserHistory()
class App extends React.Component {
render(){
return (
<Router history={his} >
<div className="App">
<Header />
<Switch>
<Route path="/register" component={Login} exact/>
</Switch>
</div>
</Router>
);
}
}
export default App;
Related
I'm new to React. I'm trying to learn react-router. What I'm trying to do is have two components link to each other like so:
Here is the App.js
import React from 'react';
import About from './About';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default App;
The About.js
import React from 'react';
import Home from './Home';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class About extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/' render={() =>
<div>
<Link to={'/home'}>Hello</Link>
</div>}/>
<Route path='/home' component={Home}/>
</Switch>
</Router>
);
}
}
export default About;
and the Home.js
import React from 'react';
import About from './About';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class Home extends React.Component {
ender () {
return (
<Router>
<Switch>
<Route path='/home' render={() =>
<div>
<Link to={'/'}>Hi</Link>
</div>}/>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default Home;
When I start the app, the About component gets rendered. However, when I click the link, the URL changes but the Home components does not get rendered. What am I doing wrong?
It's best practice to have your routing logic at one place, in this case in App.js.
import React from 'react';
import About from './About';
import Home from './Home';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render () {
return (
<Router>
<Switch>
<Route path='/home' component={Home}/>
<Route path='/' component={About}/>
</Switch>
</Router>
);
}
}
export default App;
and then in Home.js
import React from 'react';
import {Link} from 'react-router-dom';
class Home extends React.Component {
render () {
return (
<div>
<h1>This is home component</h1>
<Link to={'/'}>Go to About Component</Link>
</div>
);
}
}
export default Home;
and in About.js
import React from 'react';
import {Link} from 'react-router-dom';
class About extends React.Component {
render () {
return (
<div>
<h1>This is About component</h1>
<Link to={'/home'}>Go to Home Component</Link>
</div>
);
}
}
export default About;
I have the following index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Main from './main/main';
import './index.css';
ReactDOM.render(
<BrowserRouter><Main /></BrowserRouter>,document.getElementById('root'));
the following in main.js:
import React, { Component } from 'react';
import NavMenu from "./navmenu";
import Content from "./content";
import './main.css';
class Main extends Component {
render() {
return (
<div id="main-layout">
<div id="main-header">
<div><img src={(require("./images/ppslogo-small.png"))} alt="eeeee"/></div>
<div><h2>Lil Test By Me</h2></div>
</div>
<div id="main-content">
<NavMenu />
<Content />
</div>
<div id="main-footer">
<div>Copyright © 2020. Powered By me. All Rights Reserved.</div>
</div>
</div>
);
}
}
export default Main;
And The following in content.js
import React, { Component } from 'react';
import {Route, Switch} from 'react-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Switch>
<Route exact path="/Dashboard" component={Dashboard} />
<Route path="/Invoicing" component={Invoicing} />
</Switch>
)
}
};
export default Content
It it my attempt to create an SPA with the Content component as my target for all my subsequent pages; however, I am clearly doing something wrong as I am getting all kinds of errors all over the place. Can anyone immediately see what I am doing incorrectly here?
Route and Switch needs to be imported from react-router-dom instead of react-dom
import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Switch>
<Route exact path="/Dashboard" component={Dashboard} />
<Route path="/Invoicing" component={Invoicing} />
</Switch>
)
}
};
export default Content
Use react-router-dom instead of react-router and then
change your content.js code to this.
import React, { Component } from 'react';
import {Route, Switch, BrowserRouter as Router} from 'react-router-dom';
import Dashboard from "../dashboard/dashboard";
import Invoicing from "../invoicing/invoicing";
class Content extends Component {
render() {
return(
<Router>
<Switch>
<Route exact path="/dashboard" component={Dashboard} />
<Route path="/invoicing" component={Invoicing} />
</Switch>
</Router>
)
}
};
export default Content
notice that I have added Router above the switch. and changed react-router to react-router-dom and also transformed the routes to lowercase
I am rookie to ReactJS and recently start learning. I've created 2 components home and ContactList using TSX. I am using React-Router to change route.
App.JS
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';
class App extends Component {
render() {
return (
<div>
<Header title="This is Header">
</Header>
<Menulink></Menulink>
<Router>
<switch>
<Route exact path="/" component={Home} />
<Route path="/contact" component={ContactList} />
</switch>
</Router>
<Footer></Footer>
</div>
)
}
}
export default App;
Menulink.tsx:
import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";
export class Menulink extends React.Component {
render() {
return (
<Router>
<switch>
<Link to="/">Home </Link> |
<Link to="/contact">Contact List</Link>
</switch>
</Router>
)
}
}
Issue is, when I click on link, URL change, but component is not
getting replace. is it because I've written links and route both in
different files?
First, you need to have one Router instance
Second, MenuLink needs to be rendered as a Child of Router
Third, import Switch from react-router-dom
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';
class App extends Component {
render() {
return (
<div>
<Header title="This is Header">
</Header>
<Router>
<Route component={Menulink} />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/contact" component={ContactList} />
</Switch>
</Router>
<Footer></Footer>
</div>
)
}
}
export default App;
import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";
export class Menulink extends React.Component {
render() {
return (
<React.Fragment>
<Link to="/">Home </Link> |
<Link to="/contact">Contact List</Link>
</React.Fragment>
)
}
}
This is because you have two different Router instances. You need only One router instance at the Top of the component heirarchy. Or at the very least..the heirarchy that you expect to be changing with URLs.
So if you put your <MenuLink /> under the <Router> that is defining the routes, your routing will work fine.
Hi I am new in react and I want to implement routing with Loadable, But Its not working Its showing blank page when either http://localhost:3000/user or http://localhost:3000/
Could you please correct me where I am doing wrong.
I am also getting-
Warning: Failed prop type: Invalid prop component of type string supplied to Route, expected function.
My codes are:
home.js
import React, { Component } from 'react';
import { Link} from 'react-router-dom';
class Home extends Component {
render() {
return (
<div>
<h1>Welcome to the Tornadoes Website!</h1>
<h5><Link to="/user">User</Link></h5>
</div>
);
}
}
export default Home;
user.js:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class User extends Component {
render() {
return (
<div>
<ul>
<li>6/5 # Evergreens</li>
<li>6/8 vs Kickers</li>
<li>6/14 # United</li>
<li><Link to="/">Home</Link></li>
</ul>
</div>
)
}
}
export default User;
App.js:
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { history } from './helpers/history';
import Loadable from 'react-loadable';
import './App.css';
const Loading = () => <div> Loading... </div>;
const Home = Loadable({
loader: () => import('./components/home-component/home'),
loading: Loading
});
const User = Loadable({
loader: () => import('./components/user-component/user'),
loading: Loading
});
class App extends React.Component {
render() {
return (
<Router history={history}>
<Switch>
<Route exact path="/" component="Home" />
<Route path="/user" component="User" />
</Switch>
</Router>
);
}
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'))
registerServiceWorker();
I see you are doing this: <Route exact path="/" component="Home" /> which should be <Route exact path="/" component={Home} /> since you want to use that variable, it's impossible to reference by String when he can't know which Component you want. I hope this helps
This looks to me like there is a isRequired propType that you have missed when calling your component. Can you post your components here as well?
I'm following an online React tutorial. In the tutorial React Router 3 used while I got React Router 4 when I downloaded React Router (and react-router-dom). The code in the tutorial looks like this.
import React from "react";
import {render} from "react-dom";
import {Router, Route, browserHistory} from 'react-router'
import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";
class App extends React.Component {
render() {
return (
<Router>
<Route path={"user"} component={User}/>
<Route path={"home"} component={Home}/>
</Router>
);
}
}
render(<App />, window.document.getElementById('app'));
I'm trying to rewrite the code to work with React Router 4 like this:
import React from "react";
import {render} from "react-dom";
import {Switch, BrowserRouter, Route} from 'react-router-dom'
import {Root} from "./components/Root";
import {Home} from "./components/Home";
import {User} from "./components/User";
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path={"user"} component={User}/>
<Route path={"home"} component={Home}/>
</Switch>
</BrowserRouter>
);
}
}
render(<App />, window.document.getElementById('app'));
The code for User.js looks like this:
import React from "react";
export class User extends React.Component {
render() {
return (
<div>
<h3>The User Page</h3>
<p>User ID: </p>
</div>
);
}
}
When I try localhost:8080/user it returns nothing.
I only get
<div id="app">
<!-- react-empty: 1 -->
</div>
What is it I need to change in my code?
Try with
<Route path="/user" component={User}/>
I have answered this Issue here
Wrap your <App> in <BrowserRouter> in index.js