Intentando configurar una aplicación de reacción con React-Router v4. Necesito navegación con un parámetro de ruta dinámica y la capacidad de apuntar a áreas de la plantilla de mi aplicación con un componente que toma el parámetro de ruta dinámica. De acuerdo con los documentos v4, necesito definir mis rutas así:

const routes = [
    {
        exact: true,
        path: '/vpcs',
        navLevel2: () => <VpcList></VpcList>,
        mainContent: () => <h1>Hello VPCs</h1>
    },
    {
        exact: true,
        path: '/vpcs/:vpcName',
        navLevel2: () => <VpcList></VpcList>,
        mainContent: () => <Vpc></Vpc>
    }
]

Entonces puedo hacer:

<BrowserRouter basename="/">    
    <div>
        <nav>
            <ul>
                <li><NavLink to="/vpcs">Vpcs</NavLink></li>
            </ul>
        </nav>
        <nav>
            {routes.map((route, index) => (
              <Route
                key={index}
                path={route.path}
                exact={route.exact}
                component={route.navLevel2}
              />
            ))}
        </nav>
        <main>
            {routes.map((route, index) => (
              <Route
                key={index}
                path={route.path}
                exact={route.exact}
                component={route.mainContent}
              />
            ))}
        </main>         
    </div>
</BrowserRouter>

Sin embargo, parece que no hay forma de pasar el valor de :vpcName al componente Vpc, que lo requiere. Cuando llego a la ruta /vpc/my-vpc-name, la consola registra

Uncaught TypeError: Cannot read property 'params' of undefined at new Vpc ...

Para ver con qué tengo que trabajar, en lugar de component={route.mainContent} he probado:

component={() => (<p>{JSON.stringify(arguments)}</p>)}

Y eso cedió

{"0":{"i":480,"l":false,"exports":{}},"1":{}}

... lo cual no es alentador.

¿Qué debo hacer? ¿Necesito rebobinar a v3 para que las regiones de plantilla funcionen mientras utilizo parámetros de ruta dinámica?

0
Faust 13 nov. 2017 a las 02:58

2 respuestas

La mejor respuesta

Su componente en realidad recibe los parámetros a través de accesorios, simplemente no los está usando. Intenta hacer algo como: mainContent: props => <div>{props.match.params.vpcName}</div>

Hice un pequeño ejemplo para ti aquí: https://codesandbox.io/s/v61p95k850

2
knowbody 13 nov. 2017 a las 00:47

En lugar de usar component en su etiqueta <Route>, debería usar render que toma la función y luego puede usar su función como {() => (<p>{JSON.stringify(arguments)}</p>)} dentro de ella.

Aquí hay un enlace a su documento.

0
Indranil 13 nov. 2017 a las 00:05