2017-02-23 231 views
0

Я посещаю example.com/crud/4, это нормально, но не тогда, когда я нажимаю example.com/crud. Как сделать параметр id необязательным?Как сделать параметр с маршрута опциональным с помощью React-Router 3?

import { Router, browserHistory } from 'react-router'; 
import App from './index.js'; 

function errorLoading(err) { 
    console.log('Dynamic page loading failed! Error: ' + err); 
} 

function loadRoute(cb) { 
    return (module) => cb(null, module.default); 
} 

const routes = { 
    component: App, 
    childRoutes: [ 
    { 
     path: 'dashboard/crud/:id', 
     getComponent(location, cb) { 
     System.import('./entries/crud') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     } 
    } 

    ] 
}; 

export default() => <Router history={browserHistory} routes={routes} />; 

Я использую реагировать маршрутизатор 3.

ответ

2

Для того, чтобы любые params опциональные вам нужно использовать (/:param_name), он будет рассматриваться как дополнительные, попробуйте следующее:

path: 'dashboard/crud(/:id)', 

Update :

Для рендеринга различных компонентов по основным значениям параметров вам необходимо написать отдельную оболочку компонент, передать params это файл, на основном params значения возвращает компонент, например:

export default class Wrapper extends React.Component{ 
    render(){ 
     let params = this.props.params.id; 
     if(params == 'view') return <A/>; 
     else if(params == 'edit') return <B/>; 
    } 
} 
+0

как насчет 2 параметров? например, crud/view и crud/edit могут загружать разные компоненты. –

+0

Для этого вам нужны два разных маршрута: – juancab

+0

Это сработало, когда я нажал example.com/crud/5, но не когда я нажимаю ссылку, мой код для компонента Link - <Ссылка на = {"crud /" + item.id} > –