Switching between components i react

How to switching between components in react? is it possible with react-router?


import React, { Component } from 'react';

export default class ImageUpload extends Component {
    static displayName = ImageUpload.name;

    constructor(props) {
        super(props);
        this.state = {
            selectedFile: null,
            description: null,
            uploadResult: null,
            fileIdList: []
        };
    }

 

    onNavToEditor = async () => {

      //switch to another component
        
    };

    render() {

        return (
            <div>
                
                <div> onClick={this.onNavToEditor}</div>
               
                </div>
            </div>
        );
    }
}

thanks,

It depends what do you mean by “switching between components”.

React Router is a library for routing and you can use it to keep your components in sync with URL. For example we could use it like this:

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users">Users</Link>
      </nav>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

But maybe by switching you mean Conditional Rendering:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

I mean redirecting to another screen after clicking the div. Is it possible?

Yeah, take a look at this example from React Router:

Bear in mind React is for building single page apps. It doesn’t have the concept of different web pages, there is just a single page. “Screen” doesn’t really mean anything.

So if you want to show a different component that takes up the whole screen, then you can literally just make a component visible when you click a button.

const App = () => {
  const [screen, setScreen] = React.useState("home");

  return (
    <div>
      <nav>
        <button onClick={() => setScreen("home")}>Home</button>
        <button onClick={() => setScreen("otherScreen")}>Other Screen</button>
      </nav>
      { screen === "home" ?
      <HomeScreen/>
      :  screen === "otherScreen" ?
      <OtherScreen/>
      : null }
    </div>
    );
};

All you are doing with React Router is using the browser’s history API as a way to track that switching. So instead of some state like above, the switch happens to the URL in the address bar of the browser, which means that things like the browser back button and being able to open the app with a specific component showing can happen.

Can I use this way based on:

export default class Navigation extends Component{

Constructor(props){
Super(props);
this.state={
redirect:null,
};
}

onNavToEditor=async()=>{
this.setState({ redirect:"/ImageEfditor"});
};

render(){
return(
<div>

<div> onClick={this.onNavToEditor}</div>

</div>

)

}

}

Although, this is not working?

I’m unclear what you’re trying to do here: and the syntax you’ve posted is incorrect and I’m not sure how it has any relation to the article about React Router you posted a link to

Where is wrong?
I want after clicking the “div” change the screen to imageditor.
Also I should say I used ASP.net Core template for react. If you want I can send more details of the code.