Как вывести компонент на новой странице?

Question

[Дамир Шаниязов]

Добрый день!
У меня есть что-то наподобие layout. Там имеется Navbar и роуты для вывода.

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;

По ссылке /movies выводится таблица с фильмами. При клике по названию фильму должна открываться новая страница, на которой рендерится компонент Movie.

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);
    };

Пытался сделать вот так, но тогда Movie рендерится ниже таблицы, а мне нужно на новой странице.

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;

Comments

[Георгий Кузнецов]

разносить роуты по разным компонентам вроде как антипаттерн

[Александр Шипин]

Не совсем понятен вопрос, прошу уточнение: Вы делаете новую страницу или отрисовку компонента?
В любом случае вам нужен новый компонент, который в props будет получать информацию о требуемом фильме
а ссылку на фильм реализовывать либо через NavLink, либо через Link.

А кусок кода с роутами будет около такого.

<div className='content'>
    <Routes>
        <Route path='/movies/*' element={<Movies/>}/>
        <Route path='/movie/:id' element={<Movie/>}/> // <------- новый компонент
        <Route path='/customers' element={<Customers/>}/>
        <Route path='/rentals' element={<Rentals/>}/>
    </Routes>
</div>

В общем я скажу так, что большинство ответов есть в документации, которую стоит хоть раз да открывать.
Если вы с роутами не дружите, то посмотрите обучение от UlbiTV

[Дамир Шаниязов]

alexshipin, спасибо, ваш код верный. Кажется, я пытался через дочерний роут вывести, наверное поэтому он отрисовывался на существующий странице, а не на новой