将不带url的参数传递给路由器中的组件

Question

有没有任何方法可以在路由器中传递id而不在URL中提及。就像下面的路由一样，它的URL将有一个idabc.com/abc/1

<Route exact path="/abc/:vid" component={AbcComponent} />

我希望URL是abc.com/abc，并且id应该在AbcComponent中可用。我尝试了以下，但我在App.js中没有ID可以通过。

<Route exact path="/SpRides" 
render={(props) => <SpRides vid={vid} spId={spId} depId={depId} {...props} />} />

Answer 1

如果您真的不希望id显示在url中(既不作为查询字符串也不作为哈希(，我认为唯一的解决方案是将其设置为位置状态：https://reactrouter.com/web/api/location

您可以设置通过链接"；至"；道具作为对象：https://reactrouter.com/web/api/Link/to-object

Answer 2

这里有一个函数方法来解决它：

你可以通过"；状态"；prop(它将在历史中推送状态(，然后使用useLocation((钩子在目标组件中访问它。

<Link to='/abc/' state={{ id:your-id }}>
click here 
</Link>

现在在App.js:中

<Route exact path="/abc" component={AbcComponent} />

然后在AbcComponent文件中：

import { useLocation} from 'react-router-dom';
const AbcComponent= () => {
const location = useLocation();
console.log({location });
return <div> the id is : {location.state.id }</div>;

export default AbcComponent;

奖金：

您也可以像往常一样添加查询参数，并使用useParams((访问它。只需在链接中添加一个状态道具。在AbcComponent中，使用useParams((和useLocation((来获取参数和状态。

Answer 3

喜欢@sohaib Nasir给出的答案。在此基础上，我使用了以下解决方案。

1. 在功能组件中添加下面的代码，该代码将由点击按钮触发

   props.history.push({pathname: '/abc', state: { id: 'some_value' }})

2. 在目标组件中添加以下内容this.props.location.state.id访问变量

3. 然后使用useEffect将变量保存在localStorage中。这也解决了在出现问题时保持状态的问题。解决了@S0haib Nasir提到的关于刷新的缺陷。

Answer 4

您可以使用：

<Route exact path="/abc/:vid?" component={AbcComponent} />