javascript - 你如何在一条路线内进行路线 react

Question

我刚开始使用react，并试图将整个路由问题搞定。我有一个页面，我想在其中呈现多条路线。

我的主要 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'));

在 client search main 中我有 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 个和其中的 3 个时，标题和副标题会出现，但个人 route 的组件不会。

例如 '/admin/ClientSearch/fixed'显示标题和副标题，但不显示其自身的组件。

Answer 1

它们的关键在于您的路线的“精确”属性。此外，当你创建一个内部有路由的组件时，你可以通过它的 props 获取之前路由的 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>
)