I've been working with react router and its been giving me nothing but trouble. I want a button to load a new page, what I would like is to have a class to switch the file its rendering based on the link. I could be using the wrong thing but so any nudge in the right direction would be great.

here are my 3 main files

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import RouteFile from './RouteFile';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <RouteFile />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

RoutFile.js

import {
    BrowserRouter as Router,
    Switch,
    Route
} from "react-router-dom";
import App from './App';
import Create from './Create';
function RouteFile() {
    return (
        <Router>
            <Switch>
                <Route path="/" children={<App />}/>
                <Route path="/create" children={<Create />}/>
            </Switch>
        </Router>
    );
}
export default RouteFile;

App.js

import './App.css';
import {
  BrowserRouter as Router,
  Link
} from "react-router-dom";

function App() {
  return (
    <Router>
    <div className="App background">
        <div className="container">
          <li>
            <Link className="button a" to="/create"><div className="button-container"><div className="icon new"></div><div className="text new-text">Create</div></div></Link>
          </li>
          <li>
            <Link className="button a" to="/open">Open</Link>
          </li>
          <li>
            <Link className="button a" to="/explore">Explore</Link>
          </li>
        </div>
    </div>
    </Router>
  );
}

export default App;

Thanks again!