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);
            }
        }

所以我一直在研究，我认为这不是路由器的反应问题，首先当我尝试通过键入来访问路由时，我发现了意外＆gt;在我的bundle.js上解决了在index.html上添加<base href="/" />的问题。现在我的组件通过console.log显示组件正常呈现给我这个：

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

当我启动项目以便能够使用browserhistory并且不通过刷新页面来获取错误时，我必须将其添加到我的索引文件中：

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路线获得Params

1 个答案: