You have to wrap your app in the BrowserRouter component in order to be able to use routing

So the code in index.js will be as follows

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';


import App from './App';

ReactDOM.render(<BrowserRouter> <App /> </BrowserRouter>, document.querySelector('#root'));

You could instead wrap the app in App.js

import React from 'react';

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Join from './components/Join';
import Chat from './components/Chat';

const App = () => (
  <BrowserRouter>
    <Routes>
        <Route path='/' exact component={Join} />
        <Route path='/chat' component={Chat} />
    </Routes>
   </BrowserRouter>
  );
    export default App;

but for cleaner code, do the first approach

Wrap your code inside <BrowserRouter> making sure it isn’t in the app itself but higher up in the tree.