I'm building a single page web application using React. For this application, I'd like to prevent the URL from changing and also avoid using href links to prevent the "link preview" from showing up in the bottom left hand corner of browsers.
To address the first half of my problem I found that using MemoryRouter from react-router prevented URLs from changing when navigating within the application.
Here's a PoC for the router:
import App from './stuff/main/App';
import {Route, MemoryRouter} from "react-router";
import default_page from "./stuff/pages/default_page"
import another_page from "./stuff/pages/another_page"
const app = document.getElementById('root');
ReactDOM.render(
<MemoryRouter>
<App>
<Route exact path="/" component={default_page} />
<Route path="/anotherpage" component={another_page} />
</App>
</MemoryRouter>,
app
);
Then in App I have code like this (which works):
...
<Link to="/">default_page</Link>
<Link to="/anotherpage">another_page</Link>
{this.props.children}
...
I cannot figure out how to change pages in javascript using the MemoryRouter. The only method I've been able to find that works is using the Link tag, which causes the url to show up on the bottom left hand of the screen. If I could use another element and onclick, I'd be golden.
If you are in child Component of <Route>, you should have history prop available:
<button onClick={()=>this.props.history.push('/anotherpage')} >another_page</button>
If you are not, you can pass props.history from parent element.
Or if you are deep in structure you should use withRouter HOC
Or you can create a new without path prop, so it will match always and it provide you the right history object.
<Route render={({history})=>(
<button onClick={()=>history.push('/anotherpage')} >another_page</button>
// more buttons
)} />
Related
I am trying to show Dialog Box for unsaved changes before navigating to other route or page in ReactJS web app. I tried different solution from Stackoverflow but didn't succeeded. Most of solution related to older version. I need for version 6.0.2 (react-router-dom). Anyone who can help me out in this really appreciated.
How to resolve my problem?
Instead of downgrading, I created two custom hooks.
useCallbackPrompt Hook
useBlocker Hook
useCallbackPrompt Hook
This hook handles a popup to show & hide and update location on the base of specific conditions.
How it looks like.
useBlocker Hook
This hooks blocks users from navigating away if there are any changes
How I am using useCallbackPrompt in my component
I created state showDialog; If the user changes something on the current page/form it will update the state showDialog and If the user tries to navigate away the prompt will be shown, and ask if the user wants to stay or not.
Here is the Live Demo Link
Here is the GITHUB REPO LINK
Link for Post
You can use usePrompt or useBlocker to detect and show a prompt before leaving to another route if they have any unsaved changes (for example in a unsaved form element).
However, in the official documentation of react router v6 the following is mentioned:
from v5 (along with usePrompt and useBlocker from the v6
betas) are not included in the current released version of v6.
I checked on Github as well, even the current version 6.2.1 doesn't support usePrompt and useBlocker.
But you can still downgrade to v5 or 6.0.0-alpha.5
the following code is working with the react router v6.0.0-alpha.5
import React, { useState, useRef, useEffect } from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useHistory,
usePrompt,
useBlocker,
Routes
} from "react-router-dom";
// Sometimes you want to prevent the user from
// navigating away from a page. The most common
// use case is when they have entered some data
// into a form but haven't submitted it yet, and
// you don't want them to lose it.
export default function PreventingTransitionsExample() {
return (
<Router>
<ul>
<li>
<Link to="/">Form</Link>
</li>
<li>
<Link to="/one">One</Link>
</li>
<li>
<Link to="/two">Two</Link>
</li>
</ul>
<Routes>
<Route path="/" exact children={<BlockingForm />} />
<Route path="/one" children={<h3>One</h3>} />
<Route path="/two" children={<h3>Two</h3>} />
</Routes>
</Router>
);
}
function BlockingForm() {
let [isBlocking, setIsBlocking] = useState(false);
usePrompt(
"Hello from usePrompt -- Are you sure you want to leave?",
isBlocking
);
// useBlocker(
// () => "Hello from useBlocker -- are you sure you want to leave?",
// isBlocking
// );
return (
<form
onSubmit={event => {
event.preventDefault();
event.target.reset();
setIsBlocking(false);
}}
>
<p>
Blocking? {isBlocking ? "Yes, click a link or the back button" : "Nope"}
</p>
<p>
<input
size="50"
placeholder="type something to block transitions"
onChange={event => {
setIsBlocking(event.target.value.length > 0);
}}
/>
</p>
<p>
<button>Submit to stop blocking</button>
</p>
</form>
);
}
I have something similar to the following CodeSandBox example where I need to use react routing within two different components.
The problem that I am facing is that, if using this codesandbox example and I click down to either the Profile or Quotes component level and assuming I have the following Material-UI button within each of these bottom components:
<Button>
text="New Item"
variant="outlined"
className={classes.newButton}
component={NewItem}
to={'/new-item'}
</Button>
When clicking on this "New Item" button, the URL changes to the correct route, i.e. /new-item but the actual NewItem component is not being rendered in the page?
If I refresh the browser, then it loads correctly.
Can anyone pls assist with the above and what the best solution is, when at this level?
Arthur, make sure in your index.js or wherever you are declaring your switch its set up like so.
<Switch>
<Route exact path="/NewItem" component={NewItem}/>
</Switch>
Then you can simply add a nav link like so
<Link to="/NewItem">New Item</Link>
the button will have a component of Link which is imported from react-router-dom
<Button>
text="New Item"
variant="outlined"
className={classes.newButton}
component={Link}
to="/new-item"
</Button>
and in the app.js you will create a Route like so :
<Switch>
<Route exact path="/NewItem" component={NewItem}/>
</Switch>
Well you shouldn't use button for changing go to new Page or going new URL. rather than use
<link to=""/> for routing but if you want to use button for going to different page than use Redirect from react-router-dom
import { Redirect } from 'react-router-dom';
const Next = (e) => {
e.preventDefault();
return <Redirect to='/NewItem' />;
};
<Button onClick={Next}>
text="New Item" variant="outlined" className={classes.newButton}
component={NewItem}
</Button>;
Or you can use Link using Link
import {Link} from 'react-router-dom';
<Link to={'/NewItem'} className={classes.newButton}>
New Item
</Link>;
Her is my index.js file, layout(header, middel-container, footer)
<div>
<Header />
<div className="middle-container">
<Route path="/hello" component={HelloWorldApp} />
<Route exact path="/" component={Login} />
</div>
<Footer />
</div>
I have separate file for Header, HelloWorldApp, Login and footer. On my Header component there have login button, if I click on login button it will call a function on Login component.
How I can I do that. (This is not a child, parent component so that I can pass the function name as props.)
Please help me.
Import {Link} from react-router-dom in your login component. Add a Link to "/" like **abc. If you want to call a method inside the login component(That way it should be a class component..) then You should instead try to add that state of login component in your index.js component and then you can call login stateless functional component by sending the state as props to it so you can get the desire results.
Here is an example of calling a stateless functional component:
login({[your_state_as_props]})=>
return([conclusion of your operations on props..]);
further more you can read here https://medium.com/#ruthmpardee/passing-data-between-react-components-103ad82ebd17
and if you want to pass to data between two totally separate components,(HelloWorlApp and Login) then you can... but it will totally mess up all of your program. Instead hold any data that you require to send down to child components in your topmost component or make Helloworld component a method of your main component if its a functional component or if not, try to hold it's state in your topmost component and make helloworld a method of of your first component.
The project I am working on is kinda of sensitive, but here's what I have that I can show you all.
When I click on one of the s in my NavBar, it changes the URL, but it does not change the view to the proper component. Does anyone have any idea why? If there's a better way I can phrase this or improve the quality of my questin, let me know.
My render that I return
<NavBar />
<BrowserRouter>
<div>
<Switch>
<Route path="/propertytypes" component={PropertyTypes} />
<Route path="/entitytypes" component={EntityTypes} />
<Route path="/associationtypes" component={AssociationTypes} />
<Route path={Routes.ROOT} component={Test} />
</Switch>
</div>
</BrowserRouter>
My NavBar
import React, { Component } from "react";
import { Link } from "react-router-dom";
class NavBar extends Component {
render() {
return (
<div>
<ul>
<li>
<Link to="/propertytypes">Props!</Link>
</li>
<li>
<Link to="/entitytypes">Ent!</Link>
</li>
<li>
<Link to="/associationtypes">Ass!</Link>
</li>
</ul>
</div>
);
}
}
export default NavBar;
After clicking Props link
Besides what #Ukasyah noticed about disparity between the Router you are using (you say you are using BrowserRouter) and the screen captures with the URL you are getting (that points out you are using HashRouter), you must be getting a problem with the code you are showing up because the <Link> component in order to work must be contained inside the BrowserRouter. In your browser console it must be happening this error:
Warning: Failed context type: The context router is marked as
required in Link, but its value is undefined.
So to avoid the problem and links start to work, your render should be something like this:
<BrowserRouter>
<div>
<NavBar />
<Switch>
<Route path="/propertytypes" component={PropertyTypes} />
<Route path="/entitytypes" component={EntityTypes} />
<Route path="/associationtypes" component={AssociationTypes} />
<Route path={Routes.ROOT} component={Test} />
</Switch>
</div>
</BrowserRouter>
Note that I put the NavBar component inside the div because BrowserRouter only allows to have a single child.
I have been looking at different SO questions to solve this issue and none of them helped. My problem was using BrowserRouter in multiple different components. Same as here.
For me, the issue was that my entire app was wrapped with a <Router>, because that was how the boilerplate code was set up. Then I was copying snips from BrowserRouter docs, and did not remove the <BrowserRouter> wrapper around the code. Nested routers won't work properly.
The mistake I made was, I started with the setup from the documentation, which involves using:
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
Then I started splitting everything into separate layout files like this. So I initially copied the whole import between multiple files. At some point I was cleaning up the code and realized I only needed to import the Switch but I foolishly forgot to remove the BrowserRouter as, and I ended up with:
import { BrowserRouter as Switch } from "react-router-dom";
Which is obviously wrong since it mapped BrowserRouter to Switch, you can't have nested BrowserRouter 's and that's what introduced the issue in my case.
I am very new to react world. I was gone through many examples of react, flux, webpack etc. I found that when I create a page as a react component it is bundled by webpack and loaded in the page.
How to load react components dynamically when I click each tab.
I have done this using reat-router, but the problem is in the index.js I have to include all the tab components.
var Tab1 = require('./components/Tab1');
var Tab2 = require('./components/Tab2');
var Tab3 = require('./components/Tab3');
render((
<Router>
<Route path="/" component={Tab1}>
<Route path="about" component={Tab2} />
<Route path="users" component={Tab3} />
</Route>
</Router>
), document.body)
is there any way to load these components dynamically without including the components early in the page?
or webpack will handle this?
When i search the bundle.js I found all the components there. In my case each components will be a heavy scripts, so it is not good to load all the components in the first loading itself.
I have achieved this using code you can find out the code form here
Dynamic React-Router
At last I found a solution from here
https://github.com/rackt/react-router/blob/master/docs/guides/advanced/DynamicRouting.md
https://webpack.github.io/docs/code-splitting.html
require.ensure(["module-a", "module-b"], function(require) {
var a = require("module-a");
// ...
});