Question

我有新的反应并试图让整个路由事情失败。我有一个页面，我想渲染多个路线。

我的主index.js文件如下所示：

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Switch>
                <Route path="/adminDash" exact component={AdminDashMain}/>
                <Route path="/admin/ClientSearch" exact component={ClientDetailsMain}/>
                <Route path="/" exact component={LogIn}/>
            </Switch>
        </div>
    </BrowserRouter>

    , document.getElementById('root'));

客户端搜索主页中的

我有3个组件

class ClientDetailMain extends React.Component {

    render() {
        return(
            <div>
                <Header />
                <SubHeader username={this.props.match.params.username} />
                <Display username={this.props.match.params.username}/>
            </div>
        );
    }
}

export default withRouter(ClientDetailMain);

我使用<Display/>作为容器，其中我希望有其他路线以便一个人可以去

/admin/ClientSearch/refined
/admin/ClientSearch/general
/admin/ClientSearch/fixed

我发现/admin/ClientSearch将匹配，无论如何标题和子标题显示在所有3条路线上，但是我的路线写为：

const Display = () =>{
    return(
        <div>
           <Route path ='/admin/ClientSearch/refined' component={<Refined/>
           <Route path ='/admin/ClientSearch/general' component={<General/>
           <Route path ='/admin/ClientSearch/fixed' component={<Fixed/>
        </div>
    )
};

export default withRouter(ClientDisplay);

不显示任何内容。这是我应该怎么写的吗？当我链接到那些3时，标题和副标题显示但个人路线中的组件不会出现。

例如 '/admin/ClientSearch/fixed'显示标题和子标题，但没有显示自己的组件。

Answer 1

他们的关键在＆＃34;确切＆＃34;路线的属性。此外，当您创建一个内部有路径的组件时，您可以通过它的道具获取以前路线的URL。像这个例子：

class Main extends React.Component {
  render(){

    return (
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
        <Route exact path='/contact' component={Contact} />
        <Route path='/admin' component={AdminArea} />
      </Switch>
    )
  }
}

然后你有这样的子路线：

const AdminArea = ({match}) => (
  <Switch>
    <Route exact path={`${match.url}/specie`} component={Component} />
    <Route exact path={`${match.url}/color`} component={Component} />
    <Route exact path={`${match.url}/user/:id`} component={Component}/>
  </Switch>
)

你如何在一条路线内作出反应

1 个答案: