react-router-dom#withRouter JavaScript Examples

The following examples show how to use react-router-dom#withRouter. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From choerodon-front-base with Apache License 2.0 6 votes vote down vote up 
StoreProvider = withRouter(injectIntl(inject('AppState')(
  (props) => {
    const mobxStore = useLocalStore(
      source => ({
        overview: '',
        document: '',
        setOverview(inputOverview) {
          mobxStore.overview = inputOverview;
        },
        setDocument(inputDocument) {
          mobxStore.document = inputDocument;
        },
      }),
    );
    const { AppState: { currentMenuType: { type, id, organizationId } }, intl, children, appId, versionId } = props;
    const serviceTableDataSet = useMemo(() => new DataSet(ServiceTableDataSet), []);
    const updateReleasedVersionDataSet = useMemo(() => new DataSet(UpdateReleasedVersionDataSet(id, organizationId, appId, versionId, serviceTableDataSet, mobxStore)), []);
    const value = {
      ...props,
      updateReleasedVersionDataSet,
      serviceTableDataSet,
      mobxStore,
      organizationId,
      projectId: id,
    };
    return (
      <Store.Provider value={value}>
        {children}
      </Store.Provider>
    );
  },
)))
Example #2
Source File: nodes-chart.js    From ThreatMapper with Apache License 2.0 6 votes vote down vote up 
NodesChart = withRouter(({ onNodeClicked, match }) => (
    <div className="">
      {menu.map(menuItem => (
        <Route
          key={menuItem.id}
          exact
          path={`${match.path}/${menuItem.id}`}
          render={() => 
            <menuItem.component
             onNodeClicked={onNodeClicked}
             showPanelForNode={showPanelForNode}
            />
          }
        />
      ))}
      <Route
        exact
        path={match.path}
        render={() => <Redirect to={`${match.url}/${menu[0].id}`} />}
      />
    </div>))
Example #3
Source File: App.js    From enrollar with MIT License 6 votes vote down vote up 
function App() {
  const location = useLocation();
  return (
    <AnimatePresence exitBeforeEnter>
      <span location={ location } key={ location.key }>
        <Route exact path="/sign-up" component={ withRouter(Auth) } />
        <Route exact path="/sign-in" component={ withRouter(Auth) } />
        <Route path="/home" component={ withRouter(Search) } />
        <Route exact path="/" component={ withRouter(Homepage) } />
      </span>
    </AnimatePresence>
  )
}
Example #4
Source File: index.js    From choerodon-front-base with Apache License 2.0 6 votes vote down vote up 
StoreProvider = withRouter(injectIntl(inject('AppState')(
  (props) => {
    const { AppState: { currentMenuType: { type, id } }, intl, children, context } = props;
    const { applicationId, versionCreateDataSet } = context;
    const appServiceVersionDataSet = useMemo(() => new DataSet(AppServiceVersionDataSet({ id, intl, applicationId, versionCreateDataSet })), [id]);
    const intlPrefix = 'project.application-management.list';
    const value = {
      ...props,
      prefixCls: 'application-management',
      intlPrefix,
      applicationId,
      projectId: id,
      appServiceVersionDataSet,
    };
    return (
      <Store.Provider value={value}>
        {children}
      </Store.Provider>
    );
  },
)))
Example #5
Source File: Menu.js    From Full-Stack-React-Projects-Second-Edition with MIT License 6 votes vote down vote up 
Menu = withRouter(({history}) => (
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6" color="inherit">
        MERN Skeleton
      </Typography>
      <Link to="/">
        <IconButton aria-label="Home" style={isActive(history, "/")}>
          <HomeIcon/>
        </IconButton>
      </Link>
      <Link to="/users">
        <Button style={isActive(history, "/users")}>Users</Button>
      </Link>
      {
        !auth.isAuthenticated() && (<span>
          <Link to="/signup">
            <Button style={isActive(history, "/signup")}>Sign up
            </Button>
          </Link>
          <Link to="/signin">
            <Button style={isActive(history, "/signin")}>Sign In
            </Button>
          </Link>
        </span>)
      }
      {
        auth.isAuthenticated() && (<span>
          <Link to={"/user/" + auth.isAuthenticated().user._id}>
            <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
          </Link>
          <Button color="inherit" onClick={() => {
              auth.clearJWT(() => history.push('/'))
            }}>Sign out</Button>
        </span>)
      }
    </Toolbar>
  </AppBar>
))
Example #6
Source File: index.js    From choerodon-front-base with Apache License 2.0 6 votes vote down vote up 
StoreProvider = withRouter(injectIntl(inject('AppState')(
  (props) => {
    const { AppState: { currentMenuType: { type, id, organizationId } }, intl, children, appId, status, editReleased } = props;
    const mobxStore = useLocalStore(
      source => ({
        overview: '',
        setOverview(inputOverview) {
          mobxStore.overview = inputOverview;
        },
      }),
    );
    const categoryTypeDataSet = useMemo(() => new DataSet(optionDataSet(id)), []);
    const viewAndEditAppDetailDataSet = useMemo(() => new DataSet(ViewAndEditAppDetailDataSet(id, appId, mobxStore, status, editReleased, categoryTypeDataSet)), []);
    const value = {
      ...props,
      viewAndEditAppDetailDataSet,
      mobxStore,
      projectId: id,
    };
    return (
      <Store.Provider value={value}>
        {children}
      </Store.Provider>
    );
  },
)))
Example #7
Source File: App.js    From TrackCOVID-community with MIT License 6 votes vote down vote up 
function App () {
  const history = createBrowserHistory()
  const AppContainerWithRouter = withRouter(AppContainer)
  return (
    <Router basename={basename}>
      <AppContainerWithRouter history={history} />
    </Router>
  )
}
Example #8
Source File: routes.js    From react-portfolio with MIT License 6 votes vote down vote up 
AnimatedSwitch = withRouter(({ location }) => (
  <TransitionGroup>
    <CSSTransition
      key={location.key}
      timeout={{
        enter: 400,
        exit: 400,
      }}
      classNames="page"
      unmountOnExit
    >
      <Switch location={location}>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/portfolio" component={Portfolio} />
        <Route path="/contact" component={ContactUs} />
        <Route path="*" component={Home} />
      </Switch>
    </CSSTransition>
  </TransitionGroup>
))
Example #9
Source File: router-4.jsx    From virtuoso-design-system with MIT License 6 votes vote down vote up 
Home = withRouter(props => {
  const { location } = props;
  const pathSnippets = location.pathname.split('/').filter(i => i);
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>{breadcrumbNameMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });
  const breadcrumbItems = [
    <Breadcrumb.Item key="home">
      <Link to="/">Home</Link>
    </Breadcrumb.Item>,
  ].concat(extraBreadcrumbItems);
  return (
    <div className="demo">
      <div className="demo-nav">
        <Link to="/">Home</Link>
        <Link to="/apps">Application List</Link>
      </div>
      <Switch>
        <Route path="/apps" component={Apps} />
        <Route render={() => <span>Home Page</span>} />
      </Switch>
      <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
      <Breadcrumb>{breadcrumbItems}</Breadcrumb>
    </div>
  );
})
Example #10
Source File: MapUS.js    From covid-19 with MIT License 6 votes vote down vote up 
CountyNavButtons = withRouter((props) => {
  const county = props.county;
  const state = county.state();
  const metro = county.metro();
  const history = props.history;
  return <ToggleButtonGroup
    value={null}
    exclusive
    size="large"
    onChange={(e, route) => {
      history.push(route);
    }}
  >
    <ToggleButton size="small" value={county.routeTo()} >
      {county.name}
    </ToggleButton>
    {metro &&
      <ToggleButton value={metro.routeTo()} >
        {metro.name} </ToggleButton>
    }
    <ToggleButton value={state.routeTo()} >
      {state.name}</ToggleButton>
  </ToggleButtonGroup>;
})
Example #11
Source File: RequireAuthentication.js    From Lambda with MIT License 6 votes vote down vote up 
export default function RequireAuthentication(Component) {
  class Authentication extends React.Component {
    render() {
      return (
        <Route
          render={(props) => {
            return this.props.isAuthenticated ? (
              <Component {...props} />
            ) : (
              <Redirect
                to={{
                  pathname: "/login",
                  state: { from: props.location },
                }}
              />
            );
          }}
        />
      );
    }
  }

  Authentication.propTypes = {
    isAuthenticated: PropTypes.bool,
  };

  function mapStateToProps(state) {
    return {
      isAuthenticated: state.user.isAuthenticated,
    };
  }

  return withRouter(connect(mapStateToProps)(Authentication));
}
Example #12
Source File: Menu.js    From Full-Stack-React-Projects-Second-Edition with MIT License 6 votes vote down vote up 
Menu = withRouter(({history}) => (
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6" color="inherit">
        MERN Social
      </Typography>
      <Link to="/">
        <IconButton aria-label="Home" style={isActive(history, "/")}>
          <HomeIcon/>
        </IconButton>
      </Link>
      {
        !auth.isAuthenticated() && (<span>
          <Link to="/signup">
            <Button style={isActive(history, "/signup")}>Sign up
            </Button>
          </Link>
          <Link to="/signin">
            <Button style={isActive(history, "/signin")}>Sign In
            </Button>
          </Link>
        </span>)
      }
      {
        auth.isAuthenticated() && (<span>
          <Link to={"/user/" + auth.isAuthenticated().user._id}>
            <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
          </Link>
          <Button color="inherit" onClick={() => {
              auth.clearJWT(() => history.push('/'))
            }}>Sign out</Button>
        </span>)
      }
    </Toolbar>
  </AppBar>
))
Example #13
Source File: Requests.js    From petio with MIT License 5 votes vote down vote up 
Requests = withRouter(Requests);
Example #14
Source File: SigninFormContainer.js    From signdocs with MIT License 5 votes vote down vote up 
SigninFormContainer = withRouter(
  connect(mapStateToProps, mapDispatchToProps)(SessionForm),
)
Example #15
Source File: Shows.js    From petio with MIT License 5 votes vote down vote up 
Shows = withRouter(Shows);
Example #16
Source File: AdvMock.js    From YApi-X with MIT License 5 votes vote down vote up 
module.exports = Form.create()(withRouter(AdvMock));
Example #17
Source File: App.js    From covid-19 with MIT License 5 votes vote down vote up 
MainApp = withRouter((props) => {
  const [earth, setEarth] = React.useState(null);
  const [country, setCountry] = React.useState(null);
  const [myCounty, setMyCounty] = React.useState(null);
  const [nonUSCountry, setNonUSCountry] = React.useState(null);
  const ROW_special = props.location.pathname.startsWith("/country")
    && !props.location.pathname.startsWith("/country/US");
  React.useEffect(() => {
    if (ROW_special) {
      createBasicEarthAsync().then(data => setEarth(data));
    }
    const myCountry = new Country();
    setCountry(myCountry);

    fetchApproximatePoliticalLocation().then(countyDescr => {
      if (countyDescr.country === "United States of America" || countyDescr.county) {
        const county = makeCountyFromDescription(myCountry, countyDescr);
        setMyCounty(county);
        logger.logEvent("AppStart", {
          myCounty: county,
        });
      } else {
        setNonUSCountry(countyDescr.country);
      }
    });
  }, [ROW_special]);

  if ((ROW_special && earth === null) || country === null) {
    return <Splash />
  }

  if (props.location.pathname === "/") {
    if (myCounty) {
      return <Redirect to={reverse(routes.county, {
        state: myCounty.state().twoLetterName,
        county: myCounty.name,
      })} />;
    }

    if (nonUSCountry) {
      const search = earth.get(SEARCH_INDEX_PATH, SearchIndexComponent);
      console.log("----------------------------:" + nonUSCountry);
      console.log(nonUSCountry);
      const allMatches = search.search(nonUSCountry);

      if (allMatches && allMatches.length > 0) {
        return <Redirect to={"/country" + allMatches[0].path.string()} />;
      }
    }
    return <Splash />
  }

  if (ROW_special) {
    return (
      <WorldContext.Provider value={earth}>
        <CountryContext.Provider value={country}>
          <SafeRoutes />
        </CountryContext.Provider>
      </WorldContext.Provider>
    );
  };

  return (
    <CountryContext.Provider value={country}>
      <SafeRoutes />
    </CountryContext.Provider>
  );

})
Example #18
Source File: Menu.js    From Full-Stack-React-Projects-Second-Edition with MIT License 5 votes vote down vote up 
Menu = withRouter(({history}) => (
  <AppBar position="fixed" style={{zIndex:12343455}}>
    <Toolbar>
      <Typography variant="h6" color="inherit">
        MERN Classroom
      </Typography>
      <div>
        <Link to="/">
          <IconButton aria-label="Home" style={isActive(history, "/")}>
            <HomeIcon/>
          </IconButton>
        </Link>
      </div>
      <div style={{'position':'absolute', 'right': '10px'}}><span style={{'float': 'right'}}>
      {
        !auth.isAuthenticated() && (<span>
          <Link to="/signup">
            <Button style={isActive(history, "/signup")}>Sign up
            </Button>
          </Link>
          <Link to="/signin">
            <Button style={isActive(history, "/signin")}>Sign In
            </Button>
          </Link>
        </span>)
      }
      {
        auth.isAuthenticated() && (<span>
          {auth.isAuthenticated().user.educator && (<Link to="/teach/courses"><Button style={isPartActive(history, "/teach/")}><Library/> Teach</Button></Link>)}
          <Link to={"/user/" + auth.isAuthenticated().user._id}>
            <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
          </Link>
          <Button color="inherit" onClick={() => {
              auth.clearJWT(() => history.push('/'))
            }}>Sign out</Button>
        </span>)
      }
      </span></div>
    </Toolbar>
  </AppBar>
))
Example #19
Source File: ContentWrapping.js    From covid-19 with MIT License 5 votes vote down vote up 
Banner = withRouter((props) => {
  const history = useHistory();
  const classes = useStyles();
  const country = useContext(CountryContext);
  const [showNews] = React.useState(false);

  const us_summary = country.summary();
  const url_shared =
    "https://covid-19.direct" +
    props.match.url +
    history.location.search;
  return (
    <div>
      <div className={classes.topContainer}>
        <span className={classes.title}>
          <Typography variant="h6" >
            COVID-19.direct
            </Typography>
          <SocialMediaButtons
            className={classes.socialMediaRow}
            url={url_shared}
            size={32}
          />
          <Typography variant="body2" noWrap>
            Updated: {moment(us_summary.generatedTime).format('lll')}
          </Typography>
        </span>
        <span className={classes.grow}></span>
        {/* <span className={classes.keepclam}> Keep Clam, #StayHome</span> */}
        <span className={classes.tagline}>
          {/* <Typography variant="body1" >
            this too shall pass
          </Typography> */}
          <DonateButton />
          {/* <MaterialLink variant="body1" to="/country/" component={RouterLink} >
            Beta: Rest of World
          </MaterialLink>
 */}
        </span>
      </div >
      {showNews &&
        <WhatsNewSection />
      }
    </div >
  );
})
Example #20
Source File: SignupFormContainer.js    From signdocs with MIT License 5 votes vote down vote up 
SignupFormContainer = withRouter(
  connect(mapStateToProps, mapDispatchToProps)(SessionForm),
)
Example #21
Source File: Menu.js    From Full-Stack-React-Projects-Second-Edition with MIT License 5 votes vote down vote up 
Menu = withRouter(({history}) => (
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6" color="inherit">
        MERN Marketplace
      </Typography>
      <div>
        <Link to="/">
          <IconButton aria-label="Home" style={isActive(history, "/")}>
            <HomeIcon/>
          </IconButton>
        </Link>
        <Link to="/shops/all">
          <Button style={isActive(history, "/shops/all")}>All Shops</Button>
        </Link>
        <Link to="/auctions/all">
          <Button style={isActive(history, "/auctions/all")}>All Auctions</Button>
        </Link>
        <Link to="/cart">
          <Button style={isActive(history, "/cart")}>
            Cart
            <Badge invisible={false} color="secondary" badgeContent={cart.itemTotal()} style={{'marginLeft': '7px'}}>
              <CartIcon />
            </Badge>
          </Button>
        </Link>      
      </div>
      <div style={{'position':'absolute', 'right': '10px'}}><span style={{'float': 'right'}}>
      {
        !auth.isAuthenticated() && (<span>
          <Link to="/signup">
            <Button style={isActive(history, "/signup")}>Sign up
            </Button>
          </Link>
          <Link to="/signin">
            <Button style={isActive(history, "/signin")}>Sign In
            </Button>
          </Link>
        </span>)
      }
      {
        auth.isAuthenticated() && (<span>
          {auth.isAuthenticated().user.seller && (<>
            <Link to="/seller/shops"><Button style={isPartActive(history, "/seller/")}>My Shops</Button></Link>
            <Link to="/myauctions"><Button style={isPartActive(history, "/myauctions")}>My Auctions</Button></Link>
            </>
          )}
          <Link to={"/user/" + auth.isAuthenticated().user._id}>
            <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
          </Link>
          <Button color="inherit" onClick={() => {
              auth.clearJWT(() => history.push('/'))
            }}>Sign out</Button>
        </span>)
      }
      </span></div>
    </Toolbar>
  </AppBar>
))
Example #22
Source File: App.js    From react-portfolio with MIT License 5 votes vote down vote up 
ScrollToTop = withRouter(_ScrollToTop)
Example #23
Source File: Menu.js    From Full-Stack-React-Projects-Second-Edition with MIT License 5 votes vote down vote up 
Menu = withRouter(({history}) => (
  <AppBar position="static">
    <Toolbar>
      <Typography type="title" color="inherit">
        MERN Mediastream
      </Typography>
      <div>
        <Link to="/">
          <IconButton aria-label="Home" style={isActive(history, "/")}>
            <HomeIcon/>
          </IconButton>
        </Link>
      </div>
      <div style={{'position':'absolute', 'right': '10px'}}><span style={{'float': 'right'}}>
      {
        !auth.isAuthenticated() && (<span>
          <Link to="/signup">
            <Button style={isActive(history, "/signup")}>Sign up
            </Button>
          </Link>
          <Link to="/signin">
            <Button style={isActive(history, "/signin")}>Sign In
            </Button>
          </Link>
        </span>)
      }
      {
        auth.isAuthenticated() && (<span>
          <Link to="/media/new">
            <Button style={isActive(history, "/media/new")}>
              <AddBoxIcon style={{marginRight: '8px'}}/> Add Media
            </Button>
          </Link>
          <Link to={"/user/" + auth.isAuthenticated().user._id}>
            <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
          </Link>
          <Button color="inherit" onClick={() => {
              auth.signout(() => history.push('/'))
            }}>Sign out</Button>
        </span>)
      }
      </span></div>
    </Toolbar>
  </AppBar>
))
Example #24
Source File: App.js    From bedav with GNU General Public License v3.0 5 votes vote down vote up 
LiveRoute = withRouter(NotLiveRoute)
Example #25
Source File: SearchHome.jsx    From intergalactic with MIT License 5 votes vote down vote up 
SuggestSearch = withRouter(connectAutoComplete(connectStateResults(Search)))
Example #26
Source File: route.js    From signdocs with MIT License 5 votes vote down vote up 
ProtectedRoute = withRouter(connect(mapStateToProps)(Protected))
Example #27
Source File: Details.js    From citr-v6-project with Apache License 2.0 5 votes vote down vote up 
DetailsWithRouter = withRouter(Details)
Example #28
Source File: ConnectedErrorMessage.jsx    From Learning-Redux with MIT License 5 votes vote down vote up 
ConnectedErrorMessage = withRouter(
  connect(mapStateToProps)(ErrorMessage)
)
Example #29
Source File: Details.js    From citr-v6-project with Apache License 2.0 5 votes vote down vote up 
DetailsWithRouter = withRouter(Details)