react-router

问题 I'm writing a React.js application where I want to use Link component from react-router package in order to conditionally redirect a user to another page. If some condition doesn't hold I set the to prop to empty string which works and doesn't cause page reload and the page stays in the exact same place it was. But I'm wondering if this is the best practice? This is my solution: import { Link } from 'react-router'; <Link to={condition === true ? '/some/other/url' : ''}> <div> my content </div

问题 I'm fairly new to React, so please forgive my ignorance. I have a component: const Login: FunctionComponent = () => { const history = useHistory(); //extra logic that probably not necessary at the moment return ( <div> <form action=""> ...form stuff </form> </div> ) } When attempting to write jest/enzyme test, the one test case I've written is failing with the following error ` › encountered a declaration exception TypeError: Cannot read property 'history' of undefined` I've tried to use jest

问题 I have been trying to pass some props from my HOC to children. the HOC wraps react router switch and route. The props are missing in the child component. I make use of React.CloneElement to add the props to the children but do not seem to work <BrowserRouter> <Layout> <React.Suspense fallback={loading()}> <Switch> <Route exact path="/" component={Login} /> <Route path="/dashboard" component={Home} /> <Route path="/tickets" component={Tickets} /> </Switch> </React.Suspense> </Layout> <

问题 I am doing a react native + firebase app. At the moment, I am struggling to make a message pop up asking for a certain password whenever I press one of the page routers. I have 3 pages nested in an StackNavigator at App.js . As you can see on the following code, I have 3 routers to those pages (which are HelderScreen.js , LolsScreen.js and AthleanScreen.js ). Whenever I click on these routers, I want a message pop up to ask for a unique password to each of those routers. This is my Home.js

问题 What's the best way to prevent a particular user from accessing a route and any of its subroutes in react-router ? e.g. I have a route /admin/ and it has many other subroutes like /admin/create-user , /admin/settings , etc. Is there another way of preventing users from accessing these routes without indicating on each component some condition like so? if (user.role.name !== "Admin") { return ( <div className="error-page"> <h1>Sorry, you don't have rights to access this page.</h1> </div> ); }

问题 What's the best way to prevent a particular user from accessing a route and any of its subroutes in react-router ? e.g. I have a route /admin/ and it has many other subroutes like /admin/create-user , /admin/settings , etc. Is there another way of preventing users from accessing these routes without indicating on each component some condition like so? if (user.role.name !== "Admin") { return ( <div className="error-page"> <h1>Sorry, you don't have rights to access this page.</h1> </div> ); }

问题 I am trying to manage a react app with react router and node js server my router in react : <BrowserRouter> <Switch> <PrivateRoute token={token} Component={Payments} exact path="/payments"/> <PrivateRoute token={token} Component={User} exact path="/user"/> <PrivateRoute token={token} Component={User} exact path=""/> <PrivateRoute token={token} Component={User} exact path="/"/> </Switch> <BrowserRouter/> export const PrivateRoute = ({Component, ...rest,token}) => { return ( <Route {...rest}

问题 I am trying to manage a react app with react router and node js server my router in react : <BrowserRouter> <Switch> <PrivateRoute token={token} Component={Payments} exact path="/payments"/> <PrivateRoute token={token} Component={User} exact path="/user"/> <PrivateRoute token={token} Component={User} exact path=""/> <PrivateRoute token={token} Component={User} exact path="/"/> </Switch> <BrowserRouter/> export const PrivateRoute = ({Component, ...rest,token}) => { return ( <Route {...rest}

问题 I'm trying to get a react router to work. This is my code: var hashHistory = require('react-router-dom').hashHistory; var BrowserRouter = require('react-router-dom').BrowserRouter; var Route = require('react-router-dom').Route; var ReactDOM = require('react-dom'); var React = require('react'); var Index = require('./index'); var Login = require('./login'); ReactDOM.render( <BrowserRouter history={hashHistory}> <div> <Route path="/" component={Index} /> <Route path="/login" component={Login} /

问题 I'm using latest create-react-app config and facing the issues when switching between different routes. All my SVG 's are included in sprite file. Logically, sprite.svg file should be cached on the first-page load. But instead, every change of route (with react-router 4) loads this file which causes flickering. Content changes instantly, but images loads with 1s lag. Same for png included via import in jsx . From what I cant see in the console, same files download over and over again. Live