基于动态路由渲染 React 组件答案

【问题标题】：Render react component based on dynamic routes基于动态路由渲染 React 组件
【发布时间】：2019-11-26 09:03:51
【问题描述】：

我正在努力根据来自 React-Router 的路由来渲染组件。当路线是动态的时，我似乎无法找到匹配路线的方法。

我创建了一个组件“导航栏”，我只想在特定路线上呈现它。为此，我创建了一个单独的组件“Tracker”，它与路由匹配并呈现“Navbar”组件。

Tracker.js sn-p：

class Tracker extends Component {
  render() {
var NavVisible =
      this.props.location.pathname === "/feed" ||
      this.props.location.pathname === "/explore" ||
      this.props.location.pathname === "/chatroom" ||
      this.props.location.pathname === "/username" ? (
        <Navbar />
      ) : null;
    return <div>{NavVisible}</div>;
  }
}

假设我必须在“feed/(some_dynamic_path)”中显示Navbar组件，我应该如何写条件？

我们将不胜感激。

谢谢。

编辑：App.js

import React, {Component} from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';


class App extends Component{


  render(){

  const DefaultContainer = () => (
    <div>

      <Route path='/home' component={ft}/>
        <Route path='/explore' component={exp}/>
        <Route path='/compose' component={add}/>
        <Route path='/chatroom' component={msg}/>
        <Route path='/user' component={usrpro}/>

        </div>
  )

return (
    <BrowserRouter>    
    <div className="App">
      <Tracker/>
      <Switch>
      <Route path='/' exact component={Splash}/>
      <Route exact path="/(compose)" component={noNavContainer}/>
      <Route exact path="/(newtext)" component={noNavContainer}/>
      <Route path="/(login)" component={login}/>
      <Route component={DefaultContainer}/>        
      </Switch>      
    </div>
    </BrowserRouter>
  );
}
}


export default App;

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

你可以试试这样的：

this.props.location.pathname === '/feed/' + this.props.params.id

可能会让你开始：https://jaketrent.com/post/access-route-params-react-router-v4/

【讨论】：

逻辑很好，但是由于 Tracker 组件是从 App.js 渲染的，因此匹配道具总是有一个 url "/" 但是 isExact 似乎工作正常。似乎是 react-router 的问题link。感谢您的意见！

【解决方案2】：

您可以在您的应用程序中包含类似这样的各种 url 的路由器。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

class App extends React.Component {
  render () {
    return (
      <Router>
        <Home>
          <Switch>
            <Route path='/feed/:path_variable' component={Navbar} />
          </Switch>
        </Home>
      </Router>
    )
  }
}

同样在导航栏组件中，您将可以访问this.props.match.params.path_variable，其值会根据 URL 发生变化。

在这篇写得很好的文章中了解更多信息。 https://scotch.io/courses/using-react-router-4/route-params

【讨论】：

就像我在@brooksrelyt 回答的评论中提到的那样，react-router 似乎存在问题。感谢您的回答！
你能发布你的 app.js 文件吗
更新了问题。