React Router v4 - Switch 不适用于路由渲染答案

【问题标题】：React Router v4 - Switch doesn't work with route renderReact Router v4 - Switch 不适用于路由渲染
【发布时间】：2023-03-12 23:02:01
【问题描述】：

我正在使用 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> 组件可以按预期工作。

我可以做些什么来使我的第一个代码按预期工作？

【问题讨论】：

你使用react-redux吗？
@Sagivb.g 不，我没有。
根据您的描述，听起来问题出在<App /> 组件中。听起来您有一些基于this.props.page 的条件渲染逻辑？我的猜测是某些东西阻止了渲染，或者您没有正确更新它。你也可以发布你的<App/> 组件的代码吗？
那么你是在树的某个地方实现shouldComponentUpdate 吗？
可能重复这个：stackoverflow.com/questions/44008510/… 你检查过这个吗？

标签： javascript reactjs react-router react-router-dom

【解决方案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，它只会在组件第一次初始化时被调用一次。即使您在多个路由上都有组件，但当您更改路由和道具时它不会被卸载，这意味着构造函数永远不会被再次调用。

你需要做的是在你的props改变时使用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 />，但这应该会让您走上正轨。

【讨论】：