使用链接后，在嵌套路由中未定义React路由器dom参数

Question

我需要一个交换机组件来访问路由参数。开关在其中一个路由中呈现，但也在路由之外呈现。有没有办法在路由之外的组件中获得相同的参数？感谢您的提前帮助！

Answer 1

通常情况下，不直接通过路由传递params并通过视图组件保持简单是一种很好的模式。您可以使用useContext，然后使用组件中的useContext挂钩将每个组件(路由(插入该状态。

例如。。。

app.js

import { useState } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Routes } from "./auth/routes.js";
import { GlobalContext } from './globals/GlobalContext.js';
const App = () => {
// variables
const [someState, setSomeState] = useState('hello world');
// render
return (
<div>
<GlobalContext.Provider value={{someState, setSomeState}}>
<Router children={Routes} basename={process.env.REACT_APP_PUBLIC_URL} />
</GlobalContext.Provider>
</div>
);
}

GlobalContext.js

import { createContext } from 'react';
export const GlobalContext = createContext("");

routes.js

import { Route, Switch } from "react-router-dom";
// views
import ViewOne from '../views/ViewOne.js';
import ViewTwo from '../views/ViewTwo.js';
// globals
import { frontendLinks } from '../globals/index.js';
export const Routes = (
<Switch>
<Route exact path={frontendLinks.viewOne} component={ViewOne}></Route>
<Route exact path={frontendLinks.viewTwo} component={ViewTwo}></Route>
</Switch>
);

现在的观点。。。

import { useContext } from 'react';
// globals
import { GlobalContext } from '../globals/GlobalContext.js';
const ViewOne = () => {
const { someState } = useContext(GlobalContext);
return (
<div>
<h1>{someState}<h1>
</div>
)
}
export default ViewOne;

和

import { useContext } from 'react';
// globals
import { GlobalContext } from '../globals/GlobalContext.js';
const ViewTwo = () => {
const { someState } = useContext(GlobalContext);
return (
<div>
<h1>{someState}<h1>
</div>
)
}
export default ViewTwo;

如果你不想在你的app.js文件中管理共享状态，我建议你看看这个视频，在不同的文件中管理useContext状态>https://www.youtube.com/watch?v=52W__dKdNnU