Question

我使用React Router显示相同的组件，但每条路线上都有不同的道具：

<BrowserRouter>
  <div>
    <Route exact path="/" render={() => LOGGED_IN ? <Redirect to="/profile" /> : <Login />} />
    <Route path="/profile/:id" render={(props) => <App {...props} page="profile" pageLadder={['Home', 'Profile']} />}/>
    <Route path="/team" render={() => <App page="team" pageLadder={['Home', 'Team']} />}/>
    <Route path="/transactions" render={() => <App page="transactions" pageLadder={['Home', 'Transactions']} />}/>
    <Route path="/tournaments" render={() => <App page="tournaments" pageLadder={['Home', 'Tournaments']} />}/>
    <Route path="/tournament/:id" render={(props) => <App {...props} page="tournament" pageLadder={['Home', 'Tournament', props.match.params.id]} />}/>
    <Route path="/match/:id" render={(props) => <App {...props} page="match" pageLadder={['Home', 'Match', props.match.params.id]} />} />
    <Route path="/scrims" render={() => <App page="scrims" pageLadder={['Home', 'Scrims']} />} />
    <Route path="/faq" render={() => <App page="faq" pageLadder={['Home', 'FAQ']} />} />
    <Route path="/staff" render={() => <App page="staff" pageLadder={['Home', 'Staff']} />} />
    <Route path="/privacy" render={() => <App page="privacy" pageLadder={['Home', 'Privacy Policy']} />} />
    <Route path="/tos" render={() => <App page="tos" pageLadder={['Home', 'Terms of Service']} />} />
  </div>
</BrowserRouter>

我还需要捕获404错误，因此我添加了Switch和<Route component={NotFound} />：

<BrowserRouter>
  <Switch>
    <Route exact path="/" render={() => LOGGED_IN ? <Redirect to="/profile" /> : <Login />} />
    ... more routes
    <Route component={NotFound} />
  </Switch>
</BrowserRouter>

404确实有效，但每个<Link>元素都停止工作 - 点击后，网址确实会发生变化，但组件保持不变，除非我刷新网站。

我尝试将我的代码更改为此测试：

<BrowserRouter>
  <Switch>
    <Route path="/team" component={Login} />
    <Route path="/profile/" component={App} />
  </Switch>
</BrowserRouter>

使用此代码，<Link>组件可以按预期工作。

如何让我的第一个代码按预期工作？

Answer 1

从您的代码示例：

class App extends Component {
  constructor(props){
    super(props);

    // appStore is an instance of react-easy-state library
    // App component puts the components together, the actual pages are in AppMain component (look below for code)
    appStore.changePage(this.props.page, this.props.pageLadder, this.props.match ? this.props.match.params.id : -1);
    // this function changes appStore.page.name value and it's a global type store
  }

  render() {
    return (
      <div>
        <div>
          <Sidebar />
          <AppMain />
        </div>
      </div>
    );
  }
}

您正在构造函数中调用appStore.changePage，只有在首次初始化组件时才会调用一次。即使你有几个路由上的组件，当你改变路由和道具时它也没有被卸载，这意味着构造函数永远不会被再次调用。

您需要做的是在道具更改时使用componentDidUpdate更改页面：

componentDidUpdate (prevProps, prevState) {
  if(prevProps.page !== this.props.page) {
    appStore.changePage(this.props.page, this.props.pageLadder, this.props.match ? this.props.match.params.id : -1);
  }
}

现在，您比较当前道具中的prevProps，如果page道具已更改，则需要再次触发appStore.changePage。现在，我不确定appStore.changePage正在做什么，所以我不确定您是否还需要更新<AppMain />，但这应该让您在右边轨道。

React Router v4 - Switch不支持路由渲染

1 个答案: