react-router-dom

问题 I have issues with component being displayed on every single path because React Router 4 isn't using exact for that route (or so it appears). <Route path="/" exact component={Explore} /> <Route path="/about" component={About} /> // The one making problems <Route path="/:username" exact={true} render={props => <Profile {...props} />} /> So when I go to http://example.com/about, my Profile component is still being rendered. I guess the problem is in the route as it expects param :username and

问题 My goal is to override 'History' type, so I can use pass eventKey props for (eventKey) => history.push(eventKey) , I could not override History type from useHistory() , it said "Type History is not generic". The current solution I did is const history: any = useHistory() but I believe it defeat the purpose of types. import { RouteConfigProps } from "app/routes/config"; import { RenderRoutes } from "app/routes/RenderRoutes"; import React from "react"; import { Nav, Navbar } from "react

问题 My goal is to override 'History' type, so I can use pass eventKey props for (eventKey) => history.push(eventKey) , I could not override History type from useHistory() , it said "Type History is not generic". The current solution I did is const history: any = useHistory() but I believe it defeat the purpose of types. import { RouteConfigProps } from "app/routes/config"; import { RenderRoutes } from "app/routes/RenderRoutes"; import React from "react"; import { Nav, Navbar } from "react

问题 I'm making a website where I'm using react-router-dom's NavLink components to prevent rerenders for a single page application experience. As I am trying to make the site responsive, I have been trying to make the responsive navbar from react-bootstrap collapse after selecting a NavLink, but the collapseOnSelect behaviour doesn't seem to work for anything other than the Nav.Link components that come with react-bootstrap. Other solutions have recommended passing down props to the nav

问题 I'm currently trying to unit test a function in a React Class Component. I've tried everything that I can come across to get access to the actual Component. The application is currently setup as follows: <IntlProvider ...> <BrowserRouter> <App/> </BrowserRouter> </IntlProvider> The Component I'd like to test, lets call it Users, is defined inside of as: <Route path="/users" render={(routeProps) => { return ( <Users {...routeProps} /> ); }} /> The users component is as such: type Props = {...}

问题 I have a reactJs app which is running on a server that has nginx on it. The problem is that when I try to redirect from HomePage("/") to /UserPanel or /AdminPanel the url changes but it shows an empty page, but then when i reload the page, it works just fine. This problem doesn't occur in my localhost, but it happens to the production build. this is my nginx config: listen 80 default_server; listen [::]:80 default_server; root /var/app/html; index index.html index.htm; location / { try_files

问题 Goal is to have /login as the only public route, once logged in user has routes based on user role. Authentication is done with Keycloak I get users from keycloak.idTokenParsed.preferred_username: admin, manager, engineer, operator. If operator tries to go to role restricted route gets redirected to /notauthorized page. (This part not done) If not logged in user gets redirected to /login page. (This part is done/works) Is there a better way to do this? Not repeating routes & adding additional

问题 Why does the second call to needsString(var1) in this .tsx component give a warning, but not the first or third calls? And if I change the code to use var2 instead of var1 (which I think have exactly the same types), I don't get a warning. What gives? import { useParams } from "react-router-dom"; const DeleteTeams2 = ({ var2 } : { var2: string | undefined})=> { // use var here so that var1 and var2 get exactly the same types var { var1 } = useParams(); function needsString(str : string) :

问题 I use: import { Link } from "react-router-dom"; I am passing in multiple params like so: <Link to={`/tech/${data.foo}${data.bar}`}>{data.you}</Link> I try to access my params passed using useParams like this: let { foo } = useParams<{foo:string}>(); let { bar } = useParams<{bar:string}>(); I can access foo, but bar says undefined if I console.log it. But if I do this: <Link to={`/tech/${data.bar}/${data.foo}`}>{data.you}</Link> I then have access to data.bar but not data._foo <div>{foo}</div>

问题 I am facing a problem with react history.push . The logic of my code is, when the API call completes, if the login status in response is false, I want to push to another route. The URL is changing but the component is not rendering until I refresh the page. Here is my code for changing the route useEffect(() => { const getProductsData = async () => { setIsLoading(true); const productsData = await fetchProductsApi(); setIsLogin(productsData.data.login); setProductsArray(productsData.data.data)