Почему не работает вложенный роутинг в React?

Question

[vovashaplin]

У меня есть основной прекрасно работающий роутинг, но при добавлении роутинга в компонент Acccount, не получается сделать вложенный роутинг. Переходит по ссылкам Link, но ничего не отображает

import React, { useContext, useEffect } from 'react'
import { Route, Switch } from 'react-router-dom'
import { Redirect } from 'react-router-dom'
import { AnimatePresence } from 'framer-motion'

import { Main } from './containers/Main';
import { Items } from './containers/Items';
import { Item } from './containers/Item';
import { Basket } from './containers/Basket';
import { Reg } from './containers/Reg';
import { Log } from './containers/Log';
import { About } from './containers/About';
import { Account } from './containers/Account';
import { Logout } from './components/Navigation/Logout';
import { AuthContext } from './context/auth/AuthContext';

export const Routes = () => {

    const { autoLogin, token } = useContext(AuthContext)
    const isAuthenticated = !!token

    useEffect(() => {
        autoLogin()
        // eslint-disable-next-line
    }, [])

    let routes = (
        <Switch>
            <Route path="/" component={Main} exact />
            <Route path="/items" component={Items} exact />
            <Route path="/items/:id" component={Item} />
            <Route path="/basket" component={Basket} />
            <Route path="/reg" component={Reg} />
            <Route path="/log" component={Log} />
            <Route path="/about" component={About} />
            <Route path="/account" component={Account} />
            <Redirect to={"/"} />
        </Switch>
    )

    if (isAuthenticated) {
        routes = (
            <Switch>
                <Route path="/" component={Main} exact />
                <Route path="/items" component={Items} exact />
                <Route path="/items/:id" component={Item} />
                <Route path="/basket" component={Basket} />
                <Route path="/reg" component={Reg} />
                <Route path="/log" component={Log} />
                <Route path="/about" component={About} />
                <Route path="/logout" component={Logout} />
                <Redirect to={"/"} />
            </Switch>
        )
    }

    return (
        routes
    )
}

Account component

import React from 'react'
import { Link, Switch, Route, Redirect } from 'react-router-dom'
import { Orders } from '../components/Orders'
import { Info } from '../components/Info'
import { Change } from '../components/Change'

export const Account = () => {

    const renderLinks = () => (
        <div className="account-links">
            <Link to="/account/orders" className="nav-link">Заказы</Link>
            <Link to="/account/info" className="nav-link">Информация</Link>
            <Link to="/account/change" className="nav-link">Сменить пароль</Link>
            {/* <Link>Выход</Link> */}
        </div>
    )

    return (
        <div className="account">
            <div className="container">
                <div className="row">
                    <div className="col-md-3">
                        {renderLinks()}
                    </div>
                    <div className="col-md-9">
                        <Switch>
                            <Route to="/account/orders" component={Orders}></Route>
                            <Route to="/account/info" component={Info}></Route>
                            <Route to="/account/change" component={Change}></Route>
                        </Switch>
                    </div>
                </div>
            </div>
        </div>
    )
}

Answer 1

[Булат Миннемуллин]

Параметр to поменять на path:

<!-- Неправильно -->
 <Route to="/account/orders" component={Orders}></Route>
 <!-- Правильно -->
 <Route path="/account/orders" component={Orders}></Route>