React: Introducing the latest router feature post-login

I'm facing an issue with the Router in React. After a successful login, I am changing the type state in Redux from 0 to 1. However, when I try to make a switch in my App file, I encounter an error.

Warning: [react-router] You cannot change <Router routes>; it will be ignored

Here is my index.js. I want to modify all Route links if the user is logged in (the login form works fine and changes the redux state type to 1):

@connect((store)=>{
    console.log(store)
    return {
        typeUser: store.app.type
    }

})
class App extends React.Component{

    render(){
        switch(this.props.typeUser){
            case 0:{
        return(
        <Router history={browserHistory}>
            <Route path={"/"} component={MainPage}></Route>
            <Route path={"/login"} component={Login}></Route>
            <Route path={"product/:nameProduct/:id"} component={ProductDetails}></Route>
        </Router>
        )
        break;
        }
            case 1:{
                return(
                <Router history={browserHistory}>
                    <Route path={"/"} component={MainPageAfterLogin}></Route>
                    <Route path={"/login"} component={LoginAfterLogin}></Route>
                </Router>
                )
                break;
            }
    }
    }
}

const app = document.getElementById('app');
ReactDOM.render(<Provider store={store}>
  <App/>
  </Provider>,app);

Answer №1

Modifying the Routes configuration is possible even though changing the Router itself is not. By adjusting the Routes setup, you can customize it in various ways.

class App extends React.Component{
    render(){
        
        return(
        <Router history={browserHistory}>
             {this.props.typeUser === 0? <User1/>: <User2/>}
         
        </Router>
        )
       
    }
}

class User1 extends React.Component {
    render() {
    return (
        <div>
               <Route path={"/"} component={MainPage}></Route>
                <Route path={"/login"} component={Login}></Route>
                <Route path={"product/:nameProduct/:id"} component={ProductDetails}></Route> 
        </div>
    )
    } 
}

class User2 extends React.Component {
    render() {
    return (
        <div>
               <Route path={"/"} component={MainPage}></Route>
                <Route path={"/login"} component={Login}></Route>
             
        </div>
    ) 
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered a network error during authentication in a React API call

I have encountered an error message when making an authenticated API call. Below is my code snippet where I am receiving an "Error on Authentication Error". componentDidMount() { let config = {'Authorization': 'Here i have pasted the a ...

Tips for retrieving specific values from drop-down menus that have been incorporated into a dynamically-sized HTML table

How can I retrieve individual values from dropdown menus in HTML? These values are stored in a table of unspecified size and I want to calculate the total price of the selected drinks. Additionally, I need the code to be able to compute the price of any ne ...

What could be causing the Type Error in jsdom?

When attempting to parse a remote site using jsdom, I encountered an error when trying to use it with node-webkit.js: I received the following error: "Uncaught TypeError: A 'super' constructor call may only appear as the first statement of a f ...

The modal remains visible

Has anyone encountered a problem with hiding a Bootstrap modal based on form validation in JavaScript? I'm facing an issue where the submit function is not executed when I click the button. I've attempted using onsubmit=validateForm(), but it doe ...

Trouble with comparing two datetime values in JavaScript

I have a dilemma with two different appointments: appointment1 = "2013-07-08 12:30:00" appointment2 = "2013-07-08 13:30:00" My goal in JavaScript is to compare these two appointment dates. If they don't match, I want to remove the appointment; if t ...

Retrieving the total count of data entries from the JSON server endpoint

Working on a practice application with the JSON server serving as the backend, I have a question. Is there a way to determine the total number of records at an endpoint without actually loading all the records? For example, if my db.json file contains da ...

Displaying a console.log or alert within a React Component

As I work on integrating data from an Event with Laravel into a React Component, I encounter a learning curve. Although I am able to successfully display messages using console.log or alert, I am struggling to figure out how to render the new event's ...

The consistent failure of the 201 status node express API is causing major

I am currently working on creating an API using Express. However, when I receive a response from the server, it shows '201 created'. The issue arises when I attempt to make an HTTP request through promises and encounter a false interpretation of ...

What is the process for integrating a Browserify library module into a project as a standard file?

I have successfully developed a JavaScript library module with browserify --standalone, passing all tests using npm test. Now, I am working on creating a demo application that will utilize this library module in a browser setting. When I run npm update, th ...

What is the process for saving an HTML document with SaveFile.js?

I'm currently implementing a save feature for my website. Utilizing the 'SaveFile.js' module from this link: 'https://github.com/eligrey/FileSaver.js/' Once the user clicks on the save button, the goal is to have the entire documen ...

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

After finding this javascript code on Codepen and seeing that it worked perfectly in the console there, I tried to run it on my computer with jQuery but it didn't work outside of Codepen. Even when attempting to use it on JSfiddle or compile the SCSS ...

Using Multiple CSS Loaders in Webpack

I'm currently facing an issue with loading bootstrap CSS for use within my webpack application. The problem arises from the fact that I have a CSS loader in place with localIndentName for component-specific CSS to prevent naming conflicts with other c ...

Working with ReactJS, Material-UI, and Javascript: Facing challenges in applying rounded borders to TableRow components

I've been trying to achieve rounded borders on a TableRow element, but adding the style "borderRadius: 5" doesn't seem to have any effect. When I try wrapping the TableRow in a Box element with borderRadius, it does make the borders rounded but m ...

Deliver XML document to client from an ASP.NET MVC webpage

I need help with an ASP.NET MVC web page that requires user input to create an XML file using a javascript function. After the user enters information and clicks a button, how can I display the XML created by the javascript method? In the .cshtml file: Fo ...

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

"Struggling with solving an error in METEOR REACT SEARCH and DISPLAY upon user input onChange? Let

Here is the input code snippet: Title: <input type="text" ref="searchTitle" onChange={this.searchTitle}/> This function handles the onChange event: searchTitle(event) { this.setState({ show_article_editable_list: <Article_Editab ...

Developing a transparent "cutout" within a colored container using CSS in React Native (Layout design for a QR code scanner)

I'm currently utilizing react-native-camera for QR scanning, which is functioning properly. However, I want to implement a white screen with opacity above the camera, with a blank square in the middle to indicate where the user should scan the QR code ...

Vue Router generates a URL containing %2F when dealing with slug routes

I am facing an issue in my Vue 3 application where I need to create a route for dynamic slugs. Currently, when using RouterLink, the generated URL contains %2F instead of actual slashes which is not the desired result. For example, the current URL looks l ...

What is the correct way to update an empty object within the state using setState?

I'm currently dealing with a state that looks like this: this.state={ angles:{} } I need to know how to use setState on this empty object. Specifically, if I want to add a key and value inside my empty 'angles'. How can I achieve that? Fo ...

Eliminating certain buttons within Ember-leaflet-draw

Is there a way to remove specific buttons from the UI in my Ember application that are used for drawing lines, circles, and polygons? I am currently using Leaflet Draw in my project. Here is a snippet of my template.hbs: {{#leaflet-map onLoad=(action &apo ...