I have a table which is as shown below
I have a component which displays the details
How to display the details when click on the first tab of the table
i.e, when clicked on the number 1053 in the first column how to redirect to component with the parameter
Not sure how to build the route localhost:3000/#/sitepage/1053
Is there a way to directly get the route localhost:3000/#/sitepage/1053 so that i can give in the href of the table
Read about https://www.tutorialspoint.com/reactjs/reactjs_router.htm
but not sure how this link to route to write
Please point me to a document which will help me in doing
It you want to redirect to another component, you can use React Router Redirect
This section of React Router documentation will help you, since you haven't posted any code you tried I assumed you're looking for just some documentation to guide you.
Update:
Ok let's assume you have a Router like that:
<Router>
<Route exact path="/" render={(props) => <Table {...props} />}/>
<Route exact path="/column-details/:id" render={(props) => <ColumnDetails {...props} />}/>
</Router>
The props here has a history attribute, so in your <Table> you can have access to it by initializing your component like this
function Table({history}) {
// ...
}
Now in the first column, you need to add an onClick listener, let's say you use <TableCell> that would be
<TableCell onClick={() => history.push(`/column-details/${yourId}`)}/>
Now in your <ColumnDetails> component, we will need access to match attribute to extract our id from the url, so it would be something like:
function ColumnDetails({match}) {
const id = match.params.id;
// ...
}
I hope this is clear enough.
I think you can try react-router-dom to solve your problem, react-router-dom is a wrapper on top of react-router, which brings more flexibility
Let say your table is under Equipments component, then you have to add <Link/> component as alternate to <a> as follows, assuming your equipment object got url and title property
<Link to={`${equimpement.url}`}>{equimpement.title}</Link>
Please note that if you want to use Link component you have to import it on top
import { Link } from "react-router-dom";
And you can manage your routing in your App.js like this way
<div className="content">
<Switch>
<Route path="/not-found" component={NotFount} />
<Route path="/equipments/:id" exact component={EquipmentForm} />
<Route path="/equipments" component={Equipments} />
<Route path="/" exact component={Home} />
<Redirect to="/not-found" />
</Switch>
</div>
Make sure you have imported Route, Redirect and Switch as well in your on top of your App.js
import { Route, Redirect, Switch } from "react-router-dom";
Update
And last if you want to use Route in your app you must wrap your with BrwoserRouter
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
with its import import { BrowserRouter } from "react-router-dom";
Related
I am using a HashRouter to render different pages. The problem I am having is that when I visit
/service/app/sort, it renders <MainPage /> when I am expecting it to render <ChildPage />.
Here's similar to what my router looks like
<HashRouter>
<Switch>
<Route path="/service/app">
<MainPage />
</Route>
<Route path="/service/app/sort">
<ChildPage />
</Route>
</Switch>
</HashRouter>
Additional information that may help:
on my <MainPage />, I have a button to redirect onClick
const history = useHistory();
const handleSortClick = () => {
console.log('click me')
let path = "/service/app/sort";
history.push(path);
};
When I click it once, I get the 'click me' console.log and the link changes to /service/app/sort, but it's still the <MainPage />. If I click it one more time, I get the warning
"Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack"
You're probably facing this problem because the start of the URL is being interpreted as truthy by react-router-dom, and is letting you access the /service/app anyway.
For example, the /service/app route will not only detect this route, but will also detect /service/app/1 or /service/app1 just because it has /service/app in the path.
To prevent this, you need to pass the exact property to the route, so react-router will understand that you need to access exactly this route to render that component.
<Route path="/service/app" exact={true}>
<MainPage />
</Route>
So I have a single Route /reminder, where I do not want my Navigation component, but I want the Navigation component to render on every other Route and I'm not sure how to go about this?
This is my App.js where I am using react-router-dom for my routing.
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navigation from "./components/navigation/Navigation";
import Reminder from "./components/reminder/Reminder ";
const App = () => {
return (
<>
<Switch>
<Route path="/reminder" component={Reminder} exact />
</Switch>
<Navigation />
<MainContent>
<Router>
<Route path={"/"} component={Dashboard} exact />
</Router>
</MainContent>
</>
);
}
I had a look around for similar issues, but it's mostly for authenticated pages, this isn't for an authenticated page.
I don't want to go down the route of having to add the Navigation component into each of my 21 current routes, it seems like there should a better method?
With my current code above, it renders the Reminder component but still renders the Navigation component.
You can access the match data using a custom hook from react-router. All you need to do is
import { useRouteMatch } from "react-router-dom";
function App() {
let match = useRouteMatch("/reminder");
// Do whatever you want with the match...
return (
<>
<Switch>
<Route path="/reminder" component={Reminder} exact />
</Switch>
{!match && <Navigation />} <---Conditional rendering
<MainContent>
<Router>
<Route path={"/"} component={Dashboard} exact />
</Router>
</MainContent>
</>
);
}
Also, while I didn't change this in your example, it's not generally a good idea to have a route outside of the router component. I'm actually a little surprised react-router-dom didn't throw an error for you.
The code below will render a link that I can click on, and when I click on it, I can see the URL changing to have /japanese_game for the URL path. However... nothing appears to change on the page, the link that says "Japanese" is still there, unchanged. It should display the other stuff in <Route path="/japanese_game">, or rather, that's what I would like it to do.
What am I doing wrong?
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import './App.css';
function App() {
return (
<div className="App container">
<Router>
<Switch>
<Route path="/">
<Link to="/japanese_game">
<div className="language-option">
Japanese
日本語
</div>
</Link>
</Route>
<Route path="/japanese_game">
<h1>Japanese Game</h1>
<Link to="/">
Go back
</Link>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
Change the order, it compares and selects on the basis of which matches first. put the Route with "/japanese_game" first.
The <Switch> component render the first route he match (doc).
When you go to /japanese_game, you also hit / route, so he render the component under the / route.
To prevent that, you have 2 options:
Add an exact props to your route / : <Route exact path="/"> (hightly recommanded)
Change the ordre of your route (not recommanded at all)
Change the order of the routes or alternatively use an "exact" flag.
<Route exact path="/japanese_game">
I'm trying to implement React Router with query params like so http://localhost:3000/login?Id=1, I was able to achieve it only for my login route that too if I put path as http://localhost:3000/ which then redirects , however, I want to implement across the application. It matches nomatch route if I implement on other routes. This is how my index.js looks like, Can someone guide me how can i go about implementing all routes path including query params ?.
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route
exact
path={`/`}
render={() => {
if (!store.getState().login.isAvailable) {
return <Redirect to={`/login?Id=${Id}`} />
} else {
return <Dashboard />
}
}}
/>
<Route exact path={`/login`} component={Login} />
<Route exact path={`/signup`} component={SignUp} />
{Routes.map((prop, key) => (
<Route path={prop.path} key={key} component={prop.component} />
))}
<Route component={NoMatch} />
</Switch>
</BrowserRouter>,
document.getElementById('root')
)
There are two ways about to accomplish what you want.
The most basic way would be on each "page" or root component of each route, handle the parsing of query params.
Any component that is the component of a Route component, will have the prop location passed to it. The query params are located in location.search and that will need to be parsed. If you are only worried about modern browsers, you can use URLSearchParams, or you can use a library like query-string, or of course, you can parse them yourself.
You can read more in the react-router docs.
The second way of doing this, really isn't that different, but you can have a HOC that wraps around each of your "pages" that handles the parsing of the query params, and passes them as a list or something to the "page" component in question.
Here's an example of the basic way using URLSearchParams:
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// this is your "page" component, we are using the location prop
function ParamsPage({ location }) {
// you can use whatever you want to parse the params
let params = new URLSearchParams(location.search);
return (
<div>
<div>{params.get("name")}</div>
// this link goes to this same page, but passes a query param
Link that has params
</div>
);
}
// this would be equivalent to your index.js page
function ParamsExample() {
return (
<Router>
<Route component={ParamsPage} />
</Router>
);
}
export default ParamsExample;
EDIT: and to clarify, you don't need to do anything on your index.js page to make this work, the simple Routes you have should work fine.
Short version: When the user clicks a button, I want to do something, then reroute the user. How do I do this?
Longer version:
I have nested routes (don't know if this has any effect to the problem at hand) how this is setup is described in a pretty minimal (to the best of my knowledge) example here: link to SO question
I want a button, that first does something, then reroutes the user, therefore I can't use Link. First all I saw was
use this.props.history.push('/route') for that
But then I learned that this.props.history isn't a thing anymore and is now it's own npm package. Here I got a simple explenation on how to implement what I needed.
Example of my problem:
App.js render this:
<Router history={history}>
<div>
<Link to="/">
<button>Go to home</button>
</Link>
<Switch>
<Route exact path="/other" component={() => <Other/>} />
<Route path="/" component={() => <Home/>} />
</Switch>
</div>
</Router>
With two top level routes, an exact path for /other that render Other and looks like this:
and a relative path for / that render Home and looks like this:
Home renders this code:
<div>
THIS IS HOME WOO!
<div>
<Route exact path="/" component={() => <HomeController/>} />
<Route exact path="/about" component={() => <About/>} />
<Route exact path="/click-page" component={() => <ClickPage/>} />
</div>
</div>
Now here the default is HomeController (containing two buttons with links to about and click-page), but /about renders About and looks like this:
and /click-page renders ClickPage and looks like this:
This is where the problem starts :(
So ClickPage renders this:
<button onClick={clickHandler}>
DO SOMETHING THEN GO TO ABOUT
</button>
where clickHandler looks like this:
function clickHandler(){
console.log("doing stuff");
history.push('/about');
}
history in this case is imported from another file that looks like this:
// history.js
import { createBrowserHistory } from 'history'
export default createBrowserHistory({
/* pass a configuration object here if needed */
})
which is character by character copied from the answer i mentioned earlier.
Problem is, when I click the button, this is what I see:
So the function is called, it does something, and then it pushes "/about" to history, but nothing happens. Why is this? Do I need to force Home to rerender?
The full example code I've used to recreate the issue is here: pastebin-link
First thing is that,
this.props.history.push('/route')
is still present in the react-router4. the history prop is only available to the direct child of Router.
In case ur component is not direct child of the Router, u can export that component using the withRouter HOC, which can be imported like this
import {withRouter} from 'react-router-dom'
then, on click of button, u can do ur stuff, and use
this.props.history.push('/route')
to go to any location
You can use this.history.push in any component rendered by a Route.
Example code here: https://codesandbox.io/s/w21m5mlvyw
You can do it like this ..
import { Redirect } from 'react-router'
...
render() {
...
{fireRedirect && (
<Redirect to={from || '/thank-you'}/>
)}
Update your fireRediect state after your user action is completed
This looks like something you need here.