代码之家 › 专栏 › 技术社区 › KAT

你如何在一条反应路线内行进

react-router reactjs javascript

KAT · 技术社区 · 6 年前

我是新来的反应,并试图把整个路线的事情下来。我有一个页面,我想用它呈现多条路线。

我的主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' 显示标题和副标题,但不显示其自身组件。

1 回复 | 直到 6 年前

José Gabriel Reyes García 6 年前

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

推荐文章

siddhant kumar · Can'读取未定义的属性(读取“path”)

2 年前

sdfsdf · useNavigate替换选项的作用是什么?

2 年前

Tanner Summers · react router 6渲染的子级问题

2 年前

Tesh Aych · react axios URL连接返回404未找到

2 年前

wahida cse · 如何在mongodb中只删除一个对象,而不是删除所有与筛选查询匹配的对象?

2 年前

Kevin Tanuwijaya · 如何使用参数来响应路由器dom链接

2 年前

Roy · 带有不同道具的react组件的多个实例无法正常工作

2 年前

Ahmed Haque · 通过出口上下文传递多个状态变量

2 年前

kiryl · 警告。/。缓存/根目录。js尝试导入错误:“BaseContext”未从“@gatsbyjs/reach router”导出(作为“BaseContext”导入)

2 年前

Ancross · 链接未路由到组件

2 年前