上下文 API 将状态提升到更高的组件

Question

我试图让我的导航栏根据应用程序所在的页面进行更改，而不必为每个页面创建单独的导航组件。一旦用户进入新的“项目”页面，我希望导航栏发生变化。我这样做的方法是根据 url 参数有条件地呈现导航栏元素。一旦用户点击进入项目页面，就会有一个url参数如localhost/project/movie. 但是，导航栏组件无法访问match.params.projectId，只有项目页面组件可以访问它，因为它位于react-router的 Route 组件中。因此，我想创建一个存储 url 参数的全局状态，以便我可以在导航栏组件中使用它来有条件地呈现该组件的元素。最高级别的 App 组件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(我知道提供者必须在应用程序组件中环绕标题（导航栏）组件，但所需的状态值（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}!`)

 },[])

}