In previous versions of React Router, we had the router.match() function which will tell us if a given path is a valid route. How do I do the same thing in 4.0?
Context: We have links which are populated from data. Usually, these links are valid within our router, but not all of them are. We'd like to switch-out the Link with an a in those cases. Specifically, the path might be an external link, in which case we know we don't want a Link component and passing the external link will cause the router to fail.
U can use Route for that. React Router4 uses render props to give you the data you want. https://reacttraining.com/react-router/web/api/Route/route-render-methods So probably something like:
<Route path="/somepath">{({match,location,history})=> match? <Link ..>: null}</Route>
This is actually how NavLink is implemented.
Related
I have a component called </App>, and another component called </Interface>, both are already imported, how can I put Interface on top of App in the centre and export (export default function foo() ) it?
I am new to both React and HTML, so any helps are appreciated!
let me provide some guidance for you here:
1.) It is great that you are learning React, however since you are brand new to web development I strongly urge you to first learn to make a website with vanilla html, vanilla javascript, and css. It will provide you the fundamentals you need to jump into React.
2.) When you are asking about putting Interface on top of App, are you asking about how to make it so that Interface is displayed above App on the page that is rendered, or are you asking how to move it's position in the code? Also, I'm not sure why you have your app component as the source for the image. You should import images from your folder which contains your assets and use that instead.
You can simply import the interface component and use it in the app component. Please follow the provided example.
export default App= (props) => {
return
(
<Interface/>
)
}
Above mentioned would add Interface component to the App Component, similarly you can follow the same pattern to open any other component in the Interface component respectively.
The docs say:
Route render methods The recommended method of rendering something
with a is to use children elements, as shown above. There are,
however, a few other methods you can use to render something with a
. These are provided mostly for supporting apps that were built
with earlier versions of the router before hooks were introduced.
function You should
use only one of these props on a given . See their explanations
below to understand the differences between them. Route props All
three render methods will be passed the same three route props match
location history
But if I render with the recommended way as so:
<Router>
<Route exact path="/">
<Home />
</Route>
</Router>
Can actually the Component Home to access the Route props (location, match and history)?
If so, how can these props be passed or arrive to the Home component?
I just found out about the react-router hooks:
https://reacttraining.com/react-router/web/api/Hooks
So it is just as simple as importing the useLocation hook and use it:
let location = useLocation();
My apologies!
After looking around at the various packages to combine redux with react-router, it looked as though connected-react-router was the most popular actively supported choice.
I configured it pretty much exactly as in the docs, with one exception described below.
The problem I am having is that a react-router <Redirect> does redirect, but it does not update state.router.location. Codesandbox MNWE is here. [Edit: I realized just after posting that <Link> is having exactly the same problem, and illustrated it in a slight modification of the original codesandbox. Sorry, would have been clearer if I'd just started there, but I need some sleep!]
In the following example, there are 3 routes. The first matches the root "/". The second matches simple URLs like "/anything" and the default will match things like "/anything/else". <Where> is a little component that shows its text prop and then shows state.router.location.pathname.
<Switch>
<Route exact path="/">
<Where text="Root" />
</Route>
<Route exact path="/:thing">
<Where text="Exact" />
</Route>
<Route>
<Redirect to="/" />
</Route>
</Switch>
When you arrive, you see "Root: /", as you should. If you add "/anything" in the address bar, you see "Exact: /anything". If you put "/anything/else" in the address bar, the address bar is redirected back to the root, and the <Switch> goes back to match the root, but instead of seeing "Root: /", you see "Root: /anything/else". The logger confirms that although the manually entered URLs trigger state updates, the <Redirect> does not.
Maybe I am wrong to think that it should, but I don't see it documented one way or the other. I imagine that I have made some configuration error?
[The configuration exception that I described is that I do not use combineReducers in my App, I have a single reducer which I call appRootReducer (which is empty in this example). So I wrote a little createRootReducer wrapper. It works well enough that the basic updates to state.router do go through.]
I hope that you can help!
Ack! Searching through closed issues in the Github repo, I see that I had left in my <BrowswerRouter> tags.
Wrap your react-router v4/v5 routing with ConnectedRouter and pass the history object as a prop. Remember to delete any usage of
BrowserRouter or NativeRouter as leaving this in will
cause
problems
synchronising the state.
I'm pretty new to Gatsby/React and web development in general, so this may be a very simple fix, but I can't figure out what the problem could be.
I'm currently working on my header and making links to each of the pages on my website and am having some trouble with the "activeStyle" attribute. So before describing specifics here is a simplified version of what I am trying to do:
<Link to="/" activeStyle={{color: 'gold'}}>Home</Link>
When I place this link on a page other than home it will still highlight the link gold even though it isn't actually the active page. However, if I use the same exact code but instead link to the /about page, it will work correctly and the link will only be gold if I am on the about page. Am I missing something?
I attempted to set the link to="/index", but Gatsby through an error at me saying that "/index" does not exist and gave a list of the pages on my site, one of which was "/". I honestly can't think of what's going on with this.
Thanks!
Link doesnt have activeStyle prop. Instead of using Link you should use NavLink. It has the following props:
<NavLink>
activeClassName: string
activeStyle: object // seems you are looking for this one
exact: bool
strict: bool
isActive: func
location: object
react-router v4 doc might be useful for you
I need to pass some data in Link component of react router v4, but I cannot find a way to do it.
Basically, I have some links that are dynamically generated. I have linked these links with Link component in the following way. Upon clicking one of these links, user is routed to a new component. I want to pass some data into these new component so that I can display them there.
<Link to="dynamic link here">some text</Link>
Is there some sort of <Link to="path" data="data here">some text</Link> method in react router v4? I cannot seem to find it in the documentation page.
You can pass an object as the to prop and specify state. See the docs.
<Link to={{
pathname: '/courses',
state: { fromDashboard: true }
}}> Courses </Link>
Then you can grab that state in the new route from this.props.location.state