Не удается получить параметры из маршрутов идентификации - PullRequest
Новая
       17

Не удается получить параметры из маршрутов идентификации

0 голосов
/ 06 мая 2018

Я застрял с проблемой в моем проекте. Я пытаюсь показать компонент и работать с this.props.match.params, но независимо от того, что я делаю, я получаю undefined.

Маршруты: 

const App = () => (
    <BrowserRouter>
        <Fragment>
            <Header/>
            <main>
                <Switch>
                    <Route path="/show/:id" component={Show}/>
                    <Route path="/" component={Home}/>
                </Switch>
            </main>
        </Fragment>
    </BrowserRouter>
);

export default App;

тогда у меня есть обработчик на моем домашнем маршруте: 

async handleSubmit(searchId) {
    const id = await DwellingService.findSiocId(searchId);
    if (id) {
        this.props.history.push(`/show/${id}`);
    }
}

и, наконец, на моем компоненте шоу 

   componentDidMount() {
            console.log(this.props.match.params)
            const {id} = this.props.match.params;
            if (id) {
                this.props.requestFindDwelling(id);
            }
        }

Итак, я исследовал и думаю, что это не проблема реагирующего маршрутизатора. Сначала, когда я пытался получить доступ к маршрутам, набирая их, я получал неожиданный результат> в моем bundle.js, который был решен добавлением <base href="/" /> в индекс. HTML. Теперь мой компонент работает нормально с помощью console.log компонента show, который дает мне следующее: 

isExact:false
params:{}
path:"/show"
url:"/show"

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

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, './public/index.html'), function(err) {
        if (err) {
            res.status(500).send(err);
        }
    });
});

Что касается типа ошибки, которую я получаю, я предполагаю, что маршрут не найден и перенаправляет меня в /show.

1 Ответ

0 голосов
/ 06 мая 2018 
<Switch>
    <Route path="/show/:id" component={Show}/>
    <Route path="/" component={Home}/>
</Switch>

Это никогда не будет отображать Home, поскольку Switch отображает первое, что соответствует, а / всегда будет соответствовать первому маршруту. Не уверен, что это решит проблему, но попробуйте и дайте мне знать: 

<Switch>
    <Route exact path="/" component={Home}/> // exact is important
    <Route path="/show/:id" component={Show}/>
</Switch>
...