Question

有什么方法可以使用React Router创建两个以相同的开头开始的不同页面-GuidePage和GuideDetailPage吗？

我的代码不起作用，打开/guide后显示GuidePage个组件，没关系。但是打开/guide/detail后，它显示的是GuidePage而不是GuideDetailPage。

怎么了？

            <Router history={history}>
                <main>
                    <MenuHeader />
                    <Switch> 

                        <Route path='/guide'>
                            <Route path='/' component={GuidePage} />
                            <Route path='/detail' component={GuideDetailPage} />
                        </Route>

                        <Redirect to='/home' />
                    </Switch>
                    <Footer />
                </main>
            </Router>

因此我可以将/guide-detail用于GuideDetailPage，但是我想使用guide/detail。

Answer 1

在React Router 4中，路由是动态的，而不是静态的，您不需要在一个文件中声明所有路由，而是在具有这些路由的组件中声明嵌套的路由。

这是基本示例，您需要在Guide组件内添加两条路由，并使其相对使用match.path。

import React from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/guide">Guide</Link>
          </li>
        </ul>

        <hr />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/guide" component={Guide} />
        </Switch>
      </div>
    </Router>
  );
}

function Guide({ match }) {
  return (
    <div>
      <h2>Guide</h2>
      <ul>
        <li>
          <Link to={`${match.url}`}>guide</Link>
        </li>
        <li>
          <Link to={`${match.url}/detail`}>Guide Detail</Link>
        </li>
      </ul>

      <Route path={`${match.path}/detail`}
        component={GuidePage} />
      <Route
        exact
        path={match.path}
        render={() => <h3>Please select a topic.</h3>}
      />
    </div>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function GuidePage() {
  return (
    <div>
      <h2>GuidePage</h2>
    </div>
  );
}

export default BasicExample;

希望有帮助！

如何使用以相同字符串开头的路由

1 个答案: