react-router-v4

问题 Developing a React application using React router v4. All worked well until I introduced Redux in my app. Since then on click of links to change route the browser url changes but the component corresponding to the route is not getting loaded. It works well if I comment out Redux code. What could be causing this? Here is my code for routing: import React, { Component } from 'react'; import { Switch, Route, Link } from 'react-router-dom'; import LeftSubDefault from './../components/left-sub

问题 I have a problem to prevent unauthorized users from accessing authorized-only routes/components - such as logged in users dashboard I have the following code: import React from 'react' //other imports import {withRouter} from 'react-router' class User extends React.Component { constructor(props) { super(props) console.log('props', props) let user = JSON.parse(localStorage.getItem('userDetails')) if(!user || !user.user || props.match.params.steamId !== user.user.steamId) { props.history.push('

问题 Brand new to react, Attempting to redirect to a "homepage" after clicking submit on a "login" page. Tried to follow the react router tutorial. When I click the submit button on the form and console log the state and fakeAuth.isAuthenticated, they both return true. However, the redirect is not firing. Login.js class Login extends Component { constructor(props) { super(props); this.state = { portalId: "", password: "", redirectToReferrer: false } this.handleSubmit = this.handleSubmit.bind(this)

问题 Brand new to react, Attempting to redirect to a "homepage" after clicking submit on a "login" page. Tried to follow the react router tutorial. When I click the submit button on the form and console log the state and fakeAuth.isAuthenticated, they both return true. However, the redirect is not firing. Login.js class Login extends Component { constructor(props) { super(props); this.state = { portalId: "", password: "", redirectToReferrer: false } this.handleSubmit = this.handleSubmit.bind(this)

问题 I want to declare a path with an optional path parameter, hence when I add it the page to do something extra (e.g. fill some data): http://localhost/app/path/to/page <= render the page http://localhost/app/path/to/page/pathParam <= render the page with some data according to the pathParam In my react router I have the following paths, in order to support the two options (this is a simplified example): <Router history={history}> <Route path="/path" component={IndexPage}> <Route path="to/page"

问题 I have a "home" component with links, and when you click a link the product component is loaded with the product. I also have another component which is always visible, showing links to the "recently visited products". These links don't work when on a product page. The url updates when I click the link, and a render occurs, but the product component doesn't update with the new product. See this example: Codesandbox example Here are the routes in index.js: <BrowserRouter> <div> <Route exact

问题 How can I move to a new page after some validation is done with React Router V4 ? I have something like this: export class WelcomeForm extends Component { handleSubmit = (e) => { e.preventDefault() if(this.validateForm()) // send to '/life' } render() { return ( <form className="WelcomeForm" onSubmit={this.handleSubmit}> <input className="minutes" type="number" value={this.state.minutes} onChange={ (e) => this.handleChanges(e, "minutes")}/> </form> ) } } I would like to send the user to

问题 I have the browser cache as the central single source of truth. When I want to change the app state, I just change the broser cache and call setState to trigger a render(). Everything works fine unless the user changes the adress manually (refreshes the window, clicks on a bookmark, etc...), to fix that, I made the router's render method ( <Router render={render}> ) save the url's params myUrl/:myVar1/:myVar2 in the browser cache too My issue is that I don't want the router to ovveride what

问题 The component tree i want is as below - Login - Home - Contact - About Contact and About are children of Home. This is my App.js , class App extends Component { render() { return ( <BrowserRouter> <div> <Route exact path="/home" component={HomeView} /> </div> </BrowserRouter> ); } } render(<App />, document.getElementById('root')); This is Home, export const HomeView = ({match}) => { return( <div> <NavBar /> Here i want to render the contact component, (Navbar need to stay) </div> ) } This is

问题 I'm new to React. I have react router config in App.js like this: <BrowserRouter> <div className="App"> <Header /> <Switch> <Route exact path="/" component={Home}> </Route> <Route exact path="/management" component={Management}> </Route> <Route exact path="/sign-up" component={SignUpForm}> </Route> <Route exact path="/sign-in" component={SignInForm}> </Route> <Route component={Error}> </Route> </Switch> </div> </BrowserRouter > I want header to show in every page, there's a button of logout