react-router：无法路由到子组件

Question

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

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

2 个问题：

为了使“404”（由 NotFound 组件处理）页面正常工作，必须在 <Route/>

exact

但是如果使用exact props，FixedDrawer 组件中的<Links/> 将不起作用。单击其中任何一个将定向到“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>
);

Dashboard.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>
    );
  }

FixedDrawer.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

"Link" 组件将尝试匹配确切的路线。由于“/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>
  )
}

react-router：无法路由到子组件

react-router: unable to route to child components

javascript

reactjs

react-router

react-router-dom