1

我在带有导航栏和内容的页面上使用 react-router。

const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/shape/:activeTab" component={Shapes} />
      <Redirect from="/shape" to="/shape/triangle" />
    </Switch>
  </Router>
);

-- 形状

class Shapes extends React.Component {

getActiveTab() {
    switch (this.props.match.params.activeTab) {
      case 'triangle':
        return Triangle;
      case 'circle':
        return Circle;
      case 'square':
        return Square;
      default:
        return Triangle;
    }
  } 
render() {
    return (
      <div className="wrapper">
        // this is where the navbar renders. 
        <ul>
        <li>
          <NavLink exact to={`/shape/triangle`}> Triangle </NavLink>
        </li>,
        <li>
          <NavLink exact to={`/shape/circle`}> Circle </NavLink>
        </li>,
        <li>
          <NavLink exact to={`/shape/square`}> Square </NavLink>
        </li>,
      </ul>

        // this is where the content renders. 
        <div className="content">
          {
            this.getActiveTab().data.map(tuple =>
              <div>
                {tuple.description}
              </div>,
            )
          }
        </div>
      </div>
    );
  }
};

现在，当我单击时，localhost:8080/shape我会被重定向到带有导航的正确页面。
导航也正常工作（即点击三角形将我重定向到localhost:8080/shape/triangle）

但是，当我尝试localhost:8080/shape/triangle直接访问该页面时，我得到了 404！

它仅在我/shapes先访问页面然后使用导航时才有效。

我需要在这里解决什么以确保我可以路由到shape/*页面。

注意：我指的是https://reacttraining.com/react-router/web/api/Switch

4

0 回答 0