How to display a component on a new page?

Question

React

Good afternoon!
I have something like layout. There is a Navbar and output routes.

app.js

function App() {
  return (
    <BrowserRouter>
      <NavBar/>
      <div className='content'>
        <Routes>
          <Route path='/movies/*' element={<Movies/>}/>
          <Route path='/customers' element={<Customers/>}/>
          <Route path='/rentals' element={<Rentals/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

The link /movies displays a table with films. When you click on the movie name, a new page should open, on which the Movie component is rendered.

tableBody.jsx....

renderCell = (item, column) => {
        if (column.content) return column.content(item);
        if (column.path === 'title') return <Link to={`/movies/${item._id}`}>{_.get(item, column.path)}</Link>
        return _.get(item, column.path);
    };

I tried to do this, but then the Movie is rendered below the table, and I need it on a new page.

app.js

<Route path='/movies/' element={<Movies/>}>
            <Route path=':id' element={<Movie/>}/>
          </Route>

tableBody

class TableBody extends Component {
    renderCell = (item, column) => {
        if (column.content) return column.content(item);
        if (column.path === 'title') return <Link to={`/movies/${item._id}`}>{_.get(item, column.path)}</Link>
        return _.get(item, column.path);
    };

    createKey = (item, column) => {
        return item._id + (column.path || column.key);
    };

    render() {
        const { data, columns } = this.props;
        return (
            <React.Fragment>
                <tbody>
                { data.map(item => (
                    <tr key={ item._id }>
                        {columns.map(column => <td key={ this.createKey(item, column) }>{ this.renderCell(item, column) }</td>)}
                    </tr>
                ))}
            </tbody>
            <Routes>
                <Route path=':id' element={<Movie/>}/>
            </Routes>
            </React.Fragment>
        );
    }
}
 
export default TableBody;