router link mouseenter event is not working.when i put the cursor on router link it does not change the routes. my router link working properly but i want to working on mouseenter event. please suggest me some way how can i solve this problem
import React, { Component } from 'react';
import { browserHistory } from "react-router";
import createHistory from "history/createBrowserHistory";
import ToggleDisplay from 'react-toggle-display';
import './App.css';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Example from './Example.js';
import About from "./About.js";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import PropTypes from "prop-types";
class App extends Component {
constructor(props) {
super(props);
this.onNavigateHome = this.onNavigateHome.bind(this);
}
onNavigateHome() {
this.props.history.push('/about');
}
render() {
return <div className="App">
<Router >
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about" onMouseEnter={this.onNavigateHome.bind(this)}>
About
</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Example} />
<Route path="/about" component={About} />
</div>
</Router>
<Example />
</div>;
}
}
export default App;
React Router's Link is designed to be a click event not a mouse enter event. You can do it another way around by using state change when you do a mouse enter. Following is a pseudo code.
changeState(){
if (!this.state.entered) {
// window.location.href='/newResource';
this.props.history.push('/about');
}
this.setState({ entered : !this.state.entered });
}
render() {
return (<Router>
<span role="link" onMouseEnter={this.changeState}>
Link
</span>
</Router>);
}
Related
I want to create a simple react router example and have added my code below. The components gets displayed on refresh but the links doesn't seem to work. I have kept my links in 'Header.js' file and the components inside a folder called 'functional'. Can someone help me with this, am new to this and appreciate all the help.
routes.js
import React, { Component } from 'react';
import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';
import Container1 from './container/container1';
import Header from './container/header';
import history from './utils/history';
import { Router, Route, Switch } from 'react-router';
class Routes extends Component {
render() {
return (
<div>
<Router history={history}>
<div>
<Header />
<Switch>
<Route exact path = "/" component={Container1} />
<Route path="/component1" render={() => <Component1/>} />
<Route path="/component2" component={Component2} />
<Route path="/component3" component={Component3} />
</Switch>
</div>
</Router>
</div>
);
}
}
export default Routes;
header.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Header extends Component {
render () {
return (
<div>
<Link to='/' style={{padding: '5px'}}>
Home
</Link>
<Link to='/component1' style={{padding: '5px'}}>
component1
</Link>
<Link to='/component2' style={{padding: '5px'}}>
component2
</Link>
<Link to='/component3'style={{padding: '5px'}}>
component3
</Link>
</div>
);
}
}
export default Header;
App.js
import React from 'react';
import './App.css';
import Routes from './routes';
function App() {
return (
<div>
<Routes />
</div>
);
}
export default App;
In your routes.js, try to change following:
From:
import { Router, Route, Switch } from 'react-router';
To:
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
I'm trying to build my first website with react, and I've had a lot of trouble with navigation. I'm using react-router and for some reason my tag is changing the url at the top of the page, but not rendering the proper component.
Here is my navbar.jsx:
import React, { Component } from "react";
import { Link, BrowserRouter } from "react-router-dom";
class Navbar extends Component {
render() {
return (
<BrowserRouter>
<div>
<ul>
<li><Link to={"/test"}>Test</Link></li>
</ul>
</div>
</BrowserRouter>
)
}
}
export default Navbar;
Here is test.jsx:
import React, { Component } from "react";
class Test extends Component {
state = {};
render() {
return (
<div>
<h1>Test</h1>
</div>
);
}
}
export default Test;
Does anyone know why this is changing the url(as expected), but not rendering test.jsx?
You need to use Route to render component for different routes.
import React, { Component } from 'react';
import { Link, BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import Test from './import-path-of-test-component';
class Navbar extends Component {
render() {
return (
<BrowserRouter>
<div>
<ul>
<li>
<Link to={'/test'}>Test</Link>
</li>
</ul>
<Switch>
<Route exact path="/test" component={Test} />
</Switch>
</div>
</BrowserRouter>
);
}
}
export default Navbar;
I am new to React and I want to navigate to another component on button click. I just want to perform a simple routing. This is the code that I tried. But I am not able to route it.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Hello from './HelloComponent';
class App extends Component {
constructor(props) {
super(props);
this.try = this.try.bind(this)
}
try = () => {
alert();
<div>
<Router>
<Route path="/hello" component={Hello} />
</Router>
</div>
}
render() {
return (
<div className="App">
<div className="container">
<button id="b1" onClick={this.try}>Click me</button>
</div>
</div>
);
}
}
export default App;
Please help me with this code to perform basic routing in react JS
You cannot return JSX to onClick handler since it won't do anything with it.
You need to configure your Routes in render in advance and use history.push to change the Route
Below is a sample code that you can refer
import React, { Component } from 'react';
import { BrowserRouter as Router, Route,Switch, Redirect} from 'react-router-dom'
import Hello from './HelloComponent';
class App extends Component {
try = () => {
this.props.history.push('/hello');
}
render() {
return (
<div className="App">
<div className="container">
<button id="b1" onClick ={this.try}>Click me</button>
<Route path="/hello" component={Hello}/>
</div>
</div>
);
}
}
export default () => (
<div>
<Router>
<Route component={App} />
</Router>
</div>
);
I recommend you look at the doc.
<Route path="/hello" component={Hello}/> will display the component Hello exactly where the <Route/> is, but I think your function will do nothing here as it returns a <div> but where does it go?
You need some sort of "higher" component that will render your routes, then call a <Link/>
Then try nesting the button inside the <Link/> ?
<Link to="/??">
<button id="b1">
Click me
</button>
</Link>
in your code
try = () => {
alert();
<div>
<Router>
<Route path="/hello" component={Hello}/>
</Router>
</div>
}
your just pushing the route and it's not a action to take you to different page
bellow code will work fine and it's good practice to place router in separate component. click here you can find this code in codesandbox
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./styles.css";
function RouterComponet() {
return (
<Router>
<Switch>
<Route exact path="/" component={App} />
<Route path="/user" component={User} />
</Switch>
</Router>
);
}
class App extends Component {
constructor(props) {
super(props);
}
onClick = () => {
this.props.history.push("/user");
};
render() {
return (
<div>
<h1>App component</h1>
<a onClick={this.onClick} className="link">
click here
</a>{" "}
to user page
</div>
);
}
}
class User extends Component {
constructor(props) {
super(props);
}
onClick = () => {
this.props.history.push("/");
};
render() {
return (
<div>
<h1>User Componet</h1>
<a onClick={this.onClick} className="link">
click here
</a>{" "}
to back
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<RouterComponet />, rootElement);
I have created a demo that brings it all together. It has three files App.js, About.js, Contacts.js. To Navigate to any component, you need to add its route in App.js, Then depending on the location of your button (About.js), wrap it with Link that helps the element navigate to the specified route. When clicked, the Contacts component should be loaded. Hope this helps. code demo
App.js
import React from "react";
import { Switch, Route, BrowserRouter } from "react-router-dom";
import About from "./About";
import Contact from "./Contacts";
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/" component={About} exact />
<Route path="/contacts" component={Contact} />
</Switch>
</BrowserRouter>
);
}
export default App;
About.js
import React from "react";
import { Link } from "react-router-dom";
function About() {
return (
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</p>
<Link to="/contacts">
<button>click me</button>
</Link>
</div>
);
}
export default About;
Contacts.js
import React from "react";
function Contact() {
return <div>Call me!!</div>;
}
export default Contact;
This is the first SO post on google, so I'd like answer the question with updated coding style and answer:
From react v6 you use the useNavigation hook. (Reference)
import { useNavigate } from 'react-router-dom';
export const MyComponent = () => {
const navigate = useNavigate();
return (
<>
<button
onClick={() => {
navigate('/');
}}
>
click me
</button>
</>
);
};
I have a homepage with a link to a form, like this:
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
NavLink,
Redirect,
Switch,
withRouter
} from "react-router-dom";
import addHand from './Forms/addHand'
export class Home extends Component {
render() {
return (
<div>
<Router>
<div>
<NavLink to= '/hands/new'> Add a new hand </NavLink>
<Route path= '/hands/new' component={addHand}/>
<h4> Search For Hands By Category </h4>
<h4> Search For Sessions By Category </h4>
<h4> Search For Tables By Category </h4>
</div>
</Router>
</div>
);
}
}
export default Home;
I also have a navbar with a link to go home from any page, like this:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import unmountComponentAtNode from 'react-dom';
class NavBar extends Component {
render() {
return (
<div className="navbar">
<NavLink className="link"
to="/"
exact
>Home</NavLink>
</div>
);
}
};
export default NavBar;
If I go to the form, then change my mind and decide I want to go back to the homepage, the url changes when I press the navlink, but the form is still rendered on the homepage. I can keep going back and forth between routes, but the only way to get the form to unmount from the DOM is to refresh the page. What causes this behavior, and what can I do to fix it? I have experienced similar issues before in React but have never found the solution. Thanks!
Edit** I tried adding this to the navlink:
render() {
const refCallback = node => {
unmountComponentAtNode(node)
}
return (
<div className="navbar">
<NavLink className="link"
to="/"
exact
innerRef={refCallback}
>Home</NavLink>
</div>
);
}
};
as per the react router docs, but it gives me this error:
unmountComponentAtNode(...): Target container is not a DOM element.
Here is the code in app.js
import React, { Component } from 'react';
import './App.css';
import { Router, Route } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import Home from './Components/Home'
import Navbar from './Components/Navbar';
import addHand from './Components/Forms/addHand';
export const history = createBrowserHistory();
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title-top">Hi Adam, welcome to your Personal
Poker Universe!</h1>
<h1 className="App-title-middle">Not Adam? GTFO!</h1>
<h1 className="App-title-bottom">Just Kidding, you can stay</h1>
</header>
<Router history= {history}>
<div>
<Navbar/>
<Route exact path='/' component= {Home} />
</div>
</Router>
</div>
);
}
}
export default App;
Define one Router in your App.js:
<Router history={history}>
<Switch>
<Route exact path="/" component={Home} />} />
<Route path="/hands/new" component={addHand} />
</Switch>
</Router>
then try navigating between routes it should work. Please Let me know if it doesn't work
I am beginning to work with React and I have an issue understanding how to make react-router work.
In my project, I created an App.js file that exports a simple render function:
export default class App extends React.Component {
render () {
return <Router>
<div>
<Link to="/connected">Login</Link>
<Link to="/">Home</Link>
<Route path="/connected" component={Connected}/>
<Route exact path="/" component={LoginPage}/>
</div>
</Router>
}
}
Of course, on the top of the file, I import two components: Connected and LoginPage and a bunch of other components:
import React from 'react'
import {
HashRouter as Router,
Route,
Link
} from 'react-router-dom'
import LoginPage from './pages/LoginPage'
import Connected from './pages/Connected'
My components are quite simple:
import React from 'react'
export default class LoginPage extends React.Component {
render () {
return <div>
Hello World 1
</div>
}
}
And pretty much the same for the second component.
My problem is:
When I click on a <Link to="/">Home</Link>, the page is not updated with the LoginPage component. But if I refresh the page, the LoginPage components appears. If I click on <Link to="/connected">Login</Link>, the router does not update the page and I also need to refresh completely the page to display the right component.
What am I doing wrong? What other informations would you need to help me resolve my problem?
Copy this into 'Package.json' > 'dependencies': "react-router": "^2.4.0",
Then do npm install
Once done this:
Try this:
First Component (Routes, it is App.jsx) (Maybe you need to change routes of imports)
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, Redirect } from 'react-router';
import LoginPage from './pages/LoginPage'
import Connected from './pages/Connected'
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={LoginPage}/>
<Route path="/connected" component={Connected}/>
</Router>
, document.getElementById('root')
);
Second component (Home):
import React from 'react';
import { Link } from 'react-router';
export default class Home extends React.Component {
render() {
return(
<div>
<h1> This is HomePage </h1>
<h3> Click to go HomePage </h3>
<Link to="/">Home</Link>
<h3> Click to go Connected </h3>
<Link to="/connected">Connected</Link>
</div>
)
}
}
Third component (Connected):
import React from 'react';
import { Link } from 'react-router';
export default class Connected extends React.Component {
render() {
return(
<div>
<h1> This is ConnectedPage </h1>
<h3> Click to go HomePage </h3>
<Link to="/">Home</Link>
<h3> Click to go Connected </h3>
<Link to="/connected">Connected</Link>
</div>
)
}
}