Reactjs 反应路由器dom匹配对象isExact false
我正在做一个项目。我尝试访问Header组件中的url参数。但是,它总是返回空Reactjs 反应路由器dom匹配对象isExact false,reactjs,redux,react-router-dom,Reactjs,Redux,React Router Dom,我正在做一个项目。我尝试访问Header组件中的url参数。但是,它总是返回空 import React from 'react'; import { Route, Switch } from 'react-router-dom'; import { ConnectedRouter } from 'connected-react-router' import SamplePage from './pages/SamplePage'; import PropertyPage from './pag
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router'
import SamplePage from './pages/SamplePage';
import PropertyPage from './pages/PropertyPage';
import LoadingPage from './pages/LoadingPage';
import Header from './header/Header';
import ButtonGroup from './ButtonGroup';
import { Container } from 'semantic-ui-react';
import history from '../history';
const App = () => {
return (
<ConnectedRouter history={history}>
<div>
<Switch>
<Route path='/loading' exact component={LoadingPage} />
<Route component={Header} title='Sample page' />
</Switch>
<Container style={{ marginTop: '7em' }}>
<Switch>
<Route
path='/page/:pageType/properties/:propertyId'
exact
component={PropertyPage}
/>
<Route path='/page/:pageType' exact component={SamplePage} />
</Switch>
</Container>
<Switch>
<Route exact path='/loading' render={() => <div />} />
<Route component={ButtonGroup} />
</Switch>
</div>
</ConnectedRouter>
);
}
export default App;
从“React”导入React;
从“react router dom”导入{Route,Switch};
从“已连接路由器”导入{ConnectedRouter}
从“./pages/SamplePage”导入SamplePage;
从“/pages/PropertyPage”导入PropertyPage;
从“./pages/LoadingPage”导入LoadingPage;
从“./Header/Header”导入标题;
从“/ButtonGroup”导入ButtonGroup;
从“语义ui反应”导入{Container};
从“../history”导入历史记录;
常量应用=()=>{
返回(
} />
);
}
导出默认应用程序;
我尝试访问Header组件中的url参数。参数为空,isExact为false。有人能帮我吗?谢谢。从
控制台的屏幕截图。log
,反应路由器
正在匹配
<Route component={Header} title='Sample Scorecard' />
这种方式
开关
仅在加载路径不匹配时才会呈现它。我仍然不知道如何解决这个问题。我要做的是围绕这个问题创建一个更高阶的组件。头将包含在HOC中,那么获取URL参数就没有问题。您是否在URL匹配路径上/scorecard/:scorecardType/properties/:propertyId
?@OluwafemiSule。是的,我是。您可以在location对象下看到我的路径名。谢谢您的建议。我已经更新了它,但它不会影响match.params。我仍然为空。控制台.log
中的路径名为/scorecard/SME
。这应该与示例页面的路由匹配。位置objectYes下的路径名是什么。位置正确。但是match对象下的参数为空,match['path']为'/'。如果您的位置正确,我不确定match path为什么为'/'
。我试着复制你的路线设置,但没有任何东西能让我明白为什么你会得到不同的结果。如果我的console.log在SamplePage.js下,那么一切都很好。只有在标题组件下使用它时才会发生这种情况。
<Switch>
<Route path='/loading' exact component={LoadingPage} />
<Header title='Sample Scorecard' />
</Switch>