0

我想在我的 react-router-dom 中使用布局，此时我正在这样做

const DefaultLayout = ({children, ...rest}) => {
    return (
        <div className={styles.wrapper}>
            <Header/>
            {children}
            <Footer/>
        </div>
    )
};

const DefaultRoute = ({component: Component, ...rest}) => {
    return (
        <Route {...rest} render={matchProps => (
            <DefaultLayout>
                <Component {...matchProps} />
            </DefaultLayout>
        )}/>
    )
};

render(
    <Provider store={store}>
        <HashRouter>
            <Switch>
                <DefaultRoute exact path="/" component={AdvertList}/>
                <DefaultRoute exact path="/user" component={UserOptions}/>
                <Route path="/login" children={Login}/>

                <Route render={
                    () => (
                        <div>
                            Not found
                        </div>
                    )
                }/>
            </Switch>
        </HashRouter>
    </Provider>,
    document.querySelector('#app')
);

它工作正常，组件UserOptions和AdvertList组件都在内部呈现DefaultLayout，Login组件没有，但是在官方文档中我没有找到这样的解决方案，而是有“嵌套路由”，您可以在子类中添加新的嵌套路由，例如

如果您需要默认布局，请在路线上进行/，然后如果您需要具有该布局的广告列表，则在布局组件中定义路线/adverts并为其添加链接，依此类推，每个子组件都使用父组件的布局。

但在我的情况下，路线上已经有产品列表/，我需要将该内容更改为有关按下链接的其他产品列表，而不是添加到父布局，而是更改它的一部分。这是我的代码，

const { BrowserRouter, Route, Switch, Link } = window.ReactRouterDOM;
const { Component } = window.React;


const About = () => ('About');
const MiscProducts = () => ('Misc products');

class AdvertsList extends Component {
    render() {
        return (
          <div className="container">
            <header>Header</header>
            <main>
              <nav>
                <Link to="/miscProducts">Misc Products</Link> #
                <Link to="/about">About</Link>
              </nav>
               <div className="content">
                 Main Products
               </div>
            </main>
            <footer>Footer</footer>

            <Route path="/miscProducts" component={MiscProducts} />
          </div>
        )
    };
};

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
            <Route path="/" component={AdvertsList} />
            <Route path="/about" component={About} />

            <Route path="*" render={
                () => (
                  <div>
                    Not found
                  </div>
                )
              }/>
        </Switch>
      </BrowserRouter>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));

http://jsfiddle.net/gmcke2a4/6/这里默认加载主要产品，当我按杂项产品时，必须加载杂项产品而不是主要产品。

ps 为什么不工作？

4

1 回答 1

0

登录修复

<Route path="/login" children={Login}/>这似乎是错误的，因为子组件期望返回我认为的节点的函数。尝试<Route path="/login" children={() => (</Login />)}

布局

但在我的情况下，路线/上已经有产品列表，我需要将该内容更改为有关按下链接的其他产品列表，而不是添加到父布局

您可以创建像这样呈现特定产品的组件。

const MainProducts = () => 'Main Products'
const GummyBearsProducts = () => 'GummyBears'

const Products = props => (

 <div className="products-container">
   <Switch>
   <Route path={`${props.location.pathname}`} component={MainProducts}/> 
   <Route path={`${props.location.pathname}/gummy-bears`} components={GummyBearProducts}/> 
   </Switch>
</div>

)

然后按如下方式使用它。

class AdvertsList extends Component {
    render() {
        return (
          <div className="container">
            <header>Header</header>
            <main>
              <nav>
                <Link to="/products">Products</Link> #
                <Link to="/about">About</Link>
              </nav>
               <div className="content">
                 <Route path="/products" component={Products} />
               </div>
            </main>
            <footer>Footer</footer>


          </div>
        )
    };
};

React 路由器在渲染特定组件方面非常出色。我希望它能回答你的问题。干杯！

于 2018-08-18T08:29:49.390 回答