使用 react 时的 URL 路由问题

Question

我正在使用 react 创建网络应用程序，目前在浏览页面时遇到问题。以下是详细说明。希望有人可以帮助我。

我的组件（Task）是这样的（简化）

class Tasks extends Component {

    constructor(props) {
        super(props);
        this.type = props.match.params.type;
    }


    render(){
        return ( <h1>{this.type} </h1> );
    }
}

我使用 react-router-dom 从一个单独的组件进行路由，如下所示

:
:
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'
:

    <Route path={"/tasks/:type/"} component={Tasks}  />

最后我通过如下设置 url 从我的导航菜单中调用这个路由组件

import MenuItem from 'material-ui/Menu/MenuItem';


          <MenuItem>
                <Link name="application_creation" to="/tasks/type1">Type One</Link>
          </MenuItem>
          <MenuItem>
                <Link name="application_creation" to="/tasks/type2">Type Two</Link>
          </MenuItem>

使用此实现，当我选择一个 url（从导航菜单）时，它不会按预期工作。选择一个然后选择另一个时，它不会按预期导航。如果我在浏览器上键入 url 或刷新页面，它会指向正确的页面（其他 url）。

希望我把我的问题说清楚了 :D 。有人可以指导我如何解决这个问题吗？

谢谢

Answer 1

您应该在路由中定义路由 /tasks/type1 和 /tasks/type2。你可以设计这样的东西：

//Assume MainRoutes.js : which would have your main app navigation routes.
export default function MainRoutes(props) {
  return(
     <Router>
        <App> // Your Main App Component
          <Switch>
              <Route path='/' component={SomeHomeComponent}/>
              <Route path='/tasks' component={TaskRoutes}>
              <Route component={()=>(<NotFound/>)}/>
          </Switch>
       </App>
  </Router>
 );
}

//TaskRoutes.js Component
.
.
.
<TaskLayout>
    <Switch>
        <Route path='/tasks/type1' component={Tasks}/>
        <Route path='/tasks/type2' component={Tasks}/>
    </Switch>
</TaskLayout>


//TaskLayout.js Component : where you can render your menu items
.
.
.
<MenuItem>
   <Link name="application_creation" to="/tasks/type1">Type One</Link>
</MenuItem>
<MenuItem>
   <Link name="application_creation" to="/tasks/type2">Type Two</Link>
</MenuItem>
.
.
.

可能在您的情况下，您想根据类型重新渲染组件，如下所示：

class Tasks extends Component {
   constructor(props) {
      super(props);
      this.state = {
        type: ''
      }
   }

   componentDidMount() {
      this.setState({
         type: this.props.match.params.type
      });
   }

   render(){
      return ( <h1>{this.state.type} </h1> );
   }
}

更新：

当组件实例第一次渲染到 DOM 中时，React 将调用 componentDidMount() 如果它被定义。这是您第一次可以访问 DOM 和子引用。 现在组件实例被渲染并活着。它会一直存在并更新，直到它被卸载。

如果您在具有相同组件和不同参数的路由之间切换，将调用一次ComponentDidMount，您的原始组件不会被卸载或重新安装。而是收到新的道具。因此，您可以使用 componentWillReceiveProps(newProps) 函数并查找 newProps.params。这是预期的行为。现在，这取决于您希望如何实施路线。如果需要，您可以为 Type1 和 Type2 使用不同的组件。