javascript - Context API 将状态传递给更高的组件

Question

我试图让我的导航栏根据应用程序所在的页面进行更改，而无需为每个页面创建单独的导航组件。我希望一旦用户进入新的“项目”页面，导航栏就会发生变化。我执行此操作的方法是根据 url 参数有条件地渲染导航栏元素。一旦用户点击进入项目页面，就会有一个url参数，例如localhost/project/movie。但是，导航栏组件无法访问 match.params.projectId，只有项目页面组件可以访问它，因为它位于 react-router。因此，我想创建一个存储 url 参数的全局状态，以便我可以在导航栏组件中使用它来有条件地渲染该组件的元素。

最高级别的应用组件

const App = () => {
  return (
    <div className="app">
      <Header/>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route exact path="/project/:projectId" component={ProjectOverview}/>
      </Switch>
    </div>
  );
}

较低级别的项目页面组件

const ProjectOverview = ({ match }) => {
    useEffect(() => {
        window.scrollTo(0, 650);
    }, []);

    let project = {};

    if(match.params.projectId === 'movie'){
        project = {
            p: 'Browse your favorite Movies, TV shows, and actors. Search for specific movies, shows or actors by date, rating, region and other categories. Browse the latest and greatest films and to find information about its actors, crew, and reviews. Rate and favorite Movies, TV shows and actors while having access to them through a user account. Login / Authentication.',
            img: 'http://www.technologies.com/images/cloud-summary.png',
            gif: 'https://giphy.com/media/mUgG6FZuWN9V1/giphy.gif',
            list: ['React', 'Redux', 'Hooks', 'TMDB API', 'Sass', 'React Router']
        }
    } else if(match.params.projectId === 'ecommerce'){
        project = {
            p: 'Something else',
            img: 'http://www.technologies.com/images/cloud-summary.png',
            gif: 'https://giphy.com/media/IgASZuWN9V1/giphy.gif',
            list: ['React', 'Redux', 'Hooks', 'TMDB API', 'Sass', 'React Router']
        }
    }

    return(

我知道提供程序必须围绕应用程序组件内的 header(navbar) 组件，但所需的状态值(match.params.projectId) 可以只能在项目页面组件中找到。我想知道如何才能使提供程序的值成为项目页面组件中 url 参数的值。如果我的问题对任何人来说都太令人困惑，我会尽力进一步澄清。谢谢

Answer 1

我不知道这是否是最好的解决方案，但在一个应用程序中，我必须根据我执行以下操作的路线更改导航标题:

function App() {

  const [title, setTitle] = useState('');

  return <Router>
      <Navbar title={title} />
       <Switch>
         <Route path="/product/:id" exact render={props => <ProductPage {...props}  setTitle={setTitle} />} />
       </Switch>
       </Router>
}

在 ProductComponent 中:

function ProductionComponet({setTitle, match}){
 useEffect(()=>{
   setTitle(`product ${match.params.id}!`)
 },[])
}