react-router

问题 i have method in my parent element, an d i passed it as a prop; like this: <NavBar retrieveList={this.retrieveList}/> and in my child component i can not able to call this method from another method body. handleCloseModal () { window.$('#newHireModal').modal('hide'); /* this is working */ console.log(this.props.retrieveList); /* it gives method body, just to be sure props is coming here */ this.props.retrieveList; /*it gives "Expected an assignment or function call..." */ this.props

问题 I am very new to reactJs. I am trying to change the tab on click of button. For this I am using browserHistory . Problem here is url is getting changed but component is not getting rendered. Couldn't understand this. browserHistory.push("/personalInfo"); This is how I am trying to change the tab. Url is getting changed to http://localhost:3000/personalInfo . But component is not rendered, when I refresh the browser, it's getting changed. 回答1: Use withRouter import React, { Component } from

问题 How do I change my headers color based on what route/page I am on in my React project? I have looked at withRouter but I am not sure how to use the example. I just want to do something like if the route is not the Home component then change the background color of the header to blue. Seems like it would be simple but can't figure it out. 回答1: You can use the location prop that is added to your component by connecting the component to the router via withRouter . From there you apply a

问题 How do I change my headers color based on what route/page I am on in my React project? I have looked at withRouter but I am not sure how to use the example. I just want to do something like if the route is not the Home component then change the background color of the header to blue. Seems like it would be simple but can't figure it out. 回答1: You can use the location prop that is added to your component by connecting the component to the router via withRouter . From there you apply a

问题 Have a question regarding react router. I have a header item that I would like to display for all routes. And of course, I want this to be part of the so that the user can click items from a nav. Currently I have my <Header /> outside of my <Router> and I guess this isn´t working since my router then don't know to re-render? import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' <div> <Header /> <Router> <Switch> <Route exact path="/" component={Posts} /> <Route exact path=

问题 I am making a basic app in reactjs. I've setup routes for 3 components. The problem is select fields don't appear when the component is rendered. I'm using bootstrap-select library for the select fields. The select fields that have className as "selectpicker" do not render, they just aren't there. They showed up when I removed "selectpicker" from the className. When using "selectpicker", they show up when the browser page is reloaded. Below is a snippet from my code: https://codesandbox.io/s

问题 I am making a basic app in reactjs. I've setup routes for 3 components. The problem is select fields don't appear when the component is rendered. I'm using bootstrap-select library for the select fields. The select fields that have className as "selectpicker" do not render, they just aren't there. They showed up when I removed "selectpicker" from the className. When using "selectpicker", they show up when the browser page is reloaded. Below is a snippet from my code: https://codesandbox.io/s

问题 Ive been trying to do a simple redirect to another component on button click, but for some reason it doesnt work.I want to redirect to '/dashboard' and display AdminServices from login as follows: //index.js ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById("root")); //App.js <Switch> <Route path="/" component={Login} /> <Route path="/dashboard" component={AdminServices} /> </Switch> //Login.js <Button onClick={this.login} > </Button> login = () =>{ <Redirect to=

问题 I'm using "react-router-dom": "^4.2.2" . If I test on localhost:3000/second it works perfectly. When I upload this on ubuntu server with nginx and I try www.website.com , it works . When I try to use www.website.com/second it gives me 404 not found . I'm using create-react-app . app.js class TestRoutes extends React.Component{ constructor(props){ super(props); } render(){ return(<React.Fragment> <BrowserRouter> <Switch> <Route exact path='/' component={MainPage}/> <Route path='/second'

问题 I have a component that has props which extend RouteComponentProps that looks like this: export interface RouteComponentProps<P> { match: match<P>; location: H.Location; history: H.History; staticContext?: any; } Now, when I use my component in the app, I pass these props to it: <MyComponent match={this.props.match} location={this.props.location} history={this.props.history} /> The props are available already because it's running inside react router. Now, how do I test this component without