无法从 id 路由获取参数

Question

我的项目遇到了问题。我正在尝试显示一个组件并使用 this.props.match.params，但无论我做什么，我都无法定义。

路线：

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 上添加 [=15 解决了=] 在 index.html 上。现在我的组件通过显示组件的 console.log 呈现正常：

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。

Answer 1

<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>

无法从 id 路由获取参数

Can't get Params from id routes

history

reactjs

react-router