Question

在result=$(sqoop import ...) if [ $result > 0 ] ; then sqoop import ... else exit 1 fi中，我有以下路线：

ReactJS

当我请求

www.example.com/用户名

我按预期得到了<Route exact path="/" component={Home}/> <Route path="/:id" component={Profile}/> <Route path="/settings" component={Settings}/>组件，但是问题是当我请求

www.example.com/settings

页面同时渲染两个组件首先我得到Profile组件，在它下面，我得到Profile组件

如何在React JS中处理这种情况？

Answer 1

由于两个位置路径都相同，因此您需要使用exact，因此您可以这样使用：

<Route exact path="/" component={Home}/>
<Route exact path="/settings" component={Settings}/>
<Route path="/:id" component={Profile}/>

但是为什么不使用这样的配置文件路径？

<Route path="/profile/:id" component={Profile}/>

更好的体验。

Answer 2

添加<Switch>标签以避免呈现多条路线

import {BrowserRouter, Route, Switch} from "react-router-dom";
<BrowserRouter>
       <div className="sans-serif">
          <Switch>
             <Route exact path="/" component={Home}/>
             <Route path="/settings" component={Settings}/>
             <Route path="/:id" component={Profile}/>
          </Switch>
        </div>
</BrowserRouter>

在两个组件上反应路由器的一个路径点

2 个答案: