REACT: How do i change the rendered JSX on my test site?-CodePudding

I'm trying to learn React and currently I'm testing around with my personal website.

The question is i don't really know how to make my site render a new JSX. In pure HTML i just use a link on a button then link it to my second HTML file. I'm trying to do this with this.setState and with handleClick(). I will post the relevant code.

Can someone explain this and or give me a solution? I have been stuck at this the whole day!

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Explore from './Components/Explore';
import './index.css';
import reportWebVitals from './reportWebVitals';


export class Home extends React.Component {
  constructor(props) {
    super(props);
    this.handleCick = this.handleCick.bind(this);
    this.state = { page: <App onClick={this.handleClick}/> }
  }
  handleCick() {
    this.setState({ page: <Explore /> })
  }
  render () {
    return this.state.page
  }
}




 const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Home />
  </React.StrictMode>
);

App.js

import React from 'react';
import './App.css';

class App extends React.Component {
  render () {
    return (
      <div className="App">
        <header className="App-header">
          <div className="pb" alt="Profile picture"></div>
          <h1>Magnus Pladsen</h1>
          <h2>Junior Developer</h2>
          <div className="icons">
            <a href=""><div className="icon facebook"></div></a>
            <a href="" target="_blank"><div className="icon linkedin"></div></a>
            <a href="" target="_blank"><div className="icon github"></div></a>
          </div>
            <button onClick={this.props.onClick}>Explore</button>
        </header>
      </div>
    );
  }
}


export default App;

Explore.js

import React from 'react';
import './Explore.css';



class Explore extends React.Component {
    render() {
        return (
            <div className="Explore">
              <header className="Explore-header">
                <div className="pb" alt="Profile picture"></div>
                <h1>TEST</h1>
                <h2>THIS CODE WILL CHANGE WHEN I GET IT TO RENDER</h2>
                <div className="icons">
                  <a href="" target="_blank"><div className="icon facebook"></div></a>
                  <a href="" target="_blank"><div className="icon linkedin"></div></a>
                  <a href="" target="_blank"><div className="icon github"></div></a>
                </div>
              </header>
            </div>
        );
    }
}

export default Explore;

CodePudding user response：

You are going about this the wrong way in React. You have a few options.

Id highly reccomend looking at React Router

This is by far the best solution and youll get code similar to below in your App.js component.

The docs are easy enough to follow for a basic example.

import React from 'react'
import { HashRouter as Router, Route, Switch } from 'react-router-dom'

// import pages
import Home from './pages/Home'
import Explore from './pages/explore'

function App() {
  return (
   <Router>
     <Switch>
       <Route exact path = "/">
         <Home />
       </Route>
       <Route path = "/explore">
         <About />
       </Route>
     </Switch>
   </Router>
  )
}

export default App;

You could also use useHistory() which also had easy to follow examples.

If you are just playing around there is also the option of good old vanilla JS.

window.open(<yourpage>)