React Router Redux 总是显示第一条路线

Question

React router redux 总是显示第一个路由。无论我输入哪个url，它都会渲染第一条路线。

Index.js 文件

<ConnectedRouter history={history}>
   <App />
</ConnectedRouter>

App.js 文件

export default function App() {
      return (
            <Switch>
              <Route to="/" component={Dashboard} key={1} />;         
              <Route to="/icons" component={Icons} key={2} />;         
           </Switch>
      );
    }

Answer 1

在Route中添加exact={true}即可，默认exact设置为false，看一下here.

<Route exact path="/" component={Dashboard} key={1} />;

Answer 2

这是因为您的示例中的路由配置错误。您需要将 exact 属性添加到第一条路线。

示例：

<Switch>
    <Route exact to="/" component={Dashboard} />;         
    <Route to="/icons" component={Icons} />;         
</Switch>

如果您不在“/”路由中添加 exact，那么它将始终被匹配，因为所有其他路由也有 / 作为其一部分。

我的建议是默认将所有路由定义为精确路由，仅在需要时设置非精确路由，例如：

<Switch>
    <Route exact to="/" component={Dashboard} key={1} />;         
    <Route exact to="/icons" component={Icons} key={2} />;  
    <Route to="/icons/:iconId" component={IconDetails} key={3} />;       
</Switch>

Answer 3

使用Switch时需要添加Routes，因为Switch会匹配并渲染匹配到的第一条路由，所以最后的Routes的路径是其他Routes的前缀。

export default function App() {
      return (
            <Switch>
              <Route to="/icons" component={Icons} key={2} />
              <Route to="/" component={Dashboard} key={1} />              
           </Switch>
      );
    }

而且你不需要 ; 在 JSX 语句的末尾

React Router Redux 总是显示第一条路线

React Router Redux always show first route

javascript

reactjs

react-router-redux