javascript - react-router:无法路由到子组件

Question

我正在使用 React 构建一个在线数据库，并且已经设置了路由，如果用户未通过身份验证，他们将被重定向到登录页面。

但是，我在嵌套路由方面遇到了困难。我认为实现的某些部分是不正确的。

2个问题:

1. 为了使“404”(由 NotFound 组件处理)页面正常工作，exact必须在 <Route/> 中使用 Prop
2. 但是如果exact使用 Prop ，<Links/>在 FixedDrawer 组件中找到的将不起作用。单击其中任何一个将定向到“404”页面。

我做错了什么？

为了简单起见，我将只分享组件的渲染部分。

代码如下:

App.js(PageShell 仅用于动画页面转换)

import LoginPage from "./pages/LoginPage";
import Dashboard from "./pages/Dashboard";
import NotFound from "./pages/NotFound";
.
.
.
render() {
const childProps = {
  isAuthenticated: this.state.isAuthenticated,
  userHasAuthenticated: this.userHasAuthenticated
};

return (
  <div className="App">
    <Switch>
      <Route path="/login" exact component={PageShell(LoginPage)} />
      <Route path="/" exact component={PageShell(Dashboard)} />
      <Route component={NotFound} />
    </Switch>
  </div>
);

仪表板.js

render() {
    return (
      <div>
        <NavBar user={this.state.user} />
        <FixedDrawer handleSetCategory={this.handleSetCategory} />
        <Switch>
          <Route path="/athletes" render={() => <AthletesDataTable />} />
          <Route path="/races" render={() => <RacesDataTable />} />
        </Switch>
      </div>
    );
  }

固定抽屉.js

class FixedDrawer extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <Drawer variant="permanent" elevation={10}>
        <List component="nav" style={{ top: 65 }}>
          <ListItem button>
            <ListItemIcon>
              <FaceIcon />
            </ListItemIcon>
            <Link to="/athletes" style={{ textDecoration: "none" }}>
              <ListItemText primary="Athletes" />
            </Link>
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <GroupIcon />
            </ListItemIcon>
            <Link to="/teams" style={{ textDecoration: "none" }}>
              <ListItemText primary="Teams" />
            </Link>
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <DateRangeIcon />
            </ListItemIcon>
            <Link to="/meets" style={{ textDecoration: "none" }}>
              <ListItemText primary="Meets" />
            </Link>
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <PoolIcon />
            </ListItemIcon>
            <Link to="/races" style={{ textDecoration: "none" }}>
              <ListItemText primary="Races" />
            </Link>
          </ListItem>
          <ListItem button>
            <ListItemIcon>
              <AssignmentIcon />
            </ListItemIcon>
            <Link to="/results" style={{ textDecoration: "none" }}>
              <ListItemText primary="Race Results" />
            </Link>
          </ListItem>
        </List>
      </Drawer>
    );
  }
}

Answer 1

“链接”组件将尝试匹配确切的路线。由于“/meets”、“/teams”与您提供的路线不匹配，它会给出 404 页面。

return (
  <div className="App">
   <Navbar />
   <Sidebar />
   <Switch>
    <Route path="/login" exact component={PageShell(LoginPage)} />
    <Route path="/:val" component={PageShell(SomePage)} />
    <Route path="/" exact component={PageShell(Dashboard)} />
    <Route component={NotFound} />
  </Switch>
  <Footer />
  </div>
);

我建议你像上面那样编写路由组件。在“SomePage”组件的 componentDidMount 中，您可以在“this.props.match”对象中获取上述路径中提到的“val”的值，并根据您想要的路由渲染“SomePage”组件。

例如:在 SomePage 的 didMount 函数中:

componentDidMount(){
   this.setState({val: this.props.match.params.val})
}

render(){

  return(
   <div>
     {
     this.state.val === 'teams' ? <TeamsComponent /> : null
     }
     {
     this.state.val === 'meets' ? <MeetsComponent /> : null
     }
   </div>
  )
}