Question

我正在尝试制作以下 React 应用程序：

App.tsx
|__ Router -> '/' => MainComponent

MainComponent.tsx
|__ Route -> '/comp1/child1' => Child1
|__ Route -> '/subcomp2' => SubComponent2

SubComponent2.tsx
|__ Route -> '/subcomp2/child1' => Child1
|__ Route -> '/subcomp3' => SubComponent3

等等。

当应用重定向到组件时，加载的组件会自动重定向到子组件（加载组件内部的组件），然后通过触发应用重定向到其他组件。

好吧，问题是，当然，这根本不起作用。只是 App.tsx 到 MainComponent.tsx 工作。当我将重定向更改为“subcomp2”时，里面的路由不起作用。

我的问题是：这可以使用路由吗？。我可以在子组件中设置路由吗？我做错了什么吗？

我所拥有的示例：

    function App() {
      return (
        <Router>
            <Switch>
                <Route path="/">
                    <MainComponent/>
                </Route>
            </Switch>
        </Router>
      );
    }


class MainComponent extends React.Component<RouteComponentProps> {
    render(){return(
        <Fragment>
            <Route path='/comp1/child1'>
                <Child1 />
            </Route>
            <Route path='/comp2'>
                <Component2 />
            </Route>
        </Fragment>
    );}
}
export default withRouter(MainComponent);

class Component2 extends React.Component<RouteComponentProps> {
    render(){return(
        <Fragment>
            <Route path='/comp2/child1'>
                <Child1 />
            </Route>
            <Route path='/comp3'>
                <Component3 />
            </Route>
        </Fragment>
    );}
}
export default withRouter(Component2);

class Component3 extends React.Component<RouteComponentProps> {
    render(){return(
        <Fragment>
            <Route path='/comp3/child1'>
                <Child1 />
            </Route>
            <Route path='/comp4'>
                <Component4 />
            </Route>
        </Fragment>
    );}
}
export default withRouter(Component3);

Saludos y Gracias。

Answer 1

在 App 组件中定义所有路由。

    function App() {
      return (
        <Router>
            <Switch>
                <Route path="/">
                    <MainComponent/>
                </Route>
                <Route path="/comp1/child1">
                    <Child1 />
                </Route>
                <Route path="/comp2">
                    <Component2 />
                </Route> // ... and so on
            </Switch>
        </Router>
      );
    }

Answer 2

你的路由架构需要一些修改，例如当你加载路由/时，这个路由会加载组件MainComponent，以及子组件 strong> 不会被加载，因为为了加载它当前路由必须是 /comp1/child1 而不是 /，所以你需要为你的子组件修改路由的解决方案像这样：/。

MainComponent.tsx 
|__ Route -> '/' => Child1 
|__ Route -> '/subcomp2' => SubComponent2

//这里还有一个问题

SubComponent2.tsx
 |__ Route -> '/subcomp2/child1' => Child1
 |__ Route -> '/subcomp3' => SubComponent3 //this route will not work

路由 /subcomp3 将不起作用，因为为了加载组件 SubComponent2，活动路由必须以 subcomp2 开头，因此 SubComponent3 必须是 /subcomp2/subcomp3

正确的：

SubComponent2.tsx
 |__ Route -> '/subcomp2' => Child1
 |__ Route -> '/subcomp2/subcomp3' => SubComponent3 //this will not work

此外，您需要在 Switch 组件中添加包裹您的路由，例如：

|__ Route -> '/' => Child1 
|__ Route -> '/subcomp2' => SubComponent2

当活动路由为/时，这将加载组件child1和SubComponent2

 function App() {
      return (
        <Router>
            <Switch>
                <Route path="/">
                    <MainComponent/>
                </Route>
            </Switch>
        </Router>
      );
    }


class MainComponent extends React.Component<RouteComponentProps> {
    render(){return(
        <Fragment>
           <Switch>
            <Route path='/comp2'> //must be first
                <Component2 />
            </Route>
            <Route path='/'>
                <Child1 />
            </Route>
           </Switch>
        </Fragment>
    );}
}
export default withRouter(MainComponent);

class Component2 extends React.Component<RouteComponentProps> {
    render(){return(
        <Fragment>
          <Switch>
            <Route path='/comp2/comp3'>
                <Component3 />
            </Route>
            <Route path='/comp2'>
                <Child1 />
            </Route>
           </Switch>
        </Fragment>
    );}
}
export default withRouter(Component2);

class Component3 extends React.Component<RouteComponentProps> {
    render(){return(
        <Fragment>
           <Switch>
            <Route path='/comp2/comp3/comp4'>
                <Component4 />
            </Route>
            <Route path='/comp2/comp3'>
                <Child1 />
            </Route>
         </Switch>
        </Fragment>
    );}
}
export default withRouter(Component3);

如何在子组件中使用路由？反应路线

2 个答案: