Question

有人可以帮我解决这个问题吗？

使用包含子路由的不同路由时，我有点迷路。

我正在尝试添加具有不同路径的路由。

我想拥有一个包含所有功能的默认路由和一个单独的事件路由。

从现在开始，我感谢您的关注，并非常感谢您。

index.js

包含两条不同的路线。布局和事件。路线布局内部包含另一个路线组件。

const Root = (
        <BrowserRouter>
            <Route component={App}>
                <Route component={Layout}/>
            </Route>
            <Route path="/event/:id" component={Event}/>
        </BrowserRouter>
)
ReactDOM.render(Root , document.getElementById('root'));

App.js

要加载的组件。布局或事件

class App extends Component {
  render() {
      const { children } = this.props;
      return (
          <div>{children}</div>
    );
  }
}
export default App;

RouterLayout.js->此路由是布局内的子路由

const Router = () => (
    <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/about' component={About}/>
    </Switch>
)

export default Router

Layout.js

class Layout extends Component {
      render() {
          const { children } = this.props;
          return (
              <Content className="column is-8 content-page">
                                    <RouterLayout/>
                                    <div>{children}</div>
                                </Content>
        );
      }
    }
    export default Layout;

Answer 1

我能够通过这种方式解决

 <BrowserRouter>
            <div>
                <Route exact path="/page/*" component={Layout}/>
                <Route exact path="/event/:id" component={EmptyLayout}/>
            </div>
        </BrowserRouter>

如何使用不同的路线进行反应？

1 个答案: