Question

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

我的组件（任务）就像这样（简单）

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（从导航菜单中）时，它无法按预期工作。选择一个然后选择另一个时，它不会按预期导航。如果我在浏览器上键入网址或刷新页面，它会指向正确的页面（其他网址）。

希望我明白我的问题：D。有人可以指导我如何解决这个问题吗？

由于

Answer 1

您应该在路由中定义路由/任务/ 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使用不同的组件。

使用react时的URL路由问题

1 个答案: