URL 使用 React 时的路由问题

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>

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

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

谢谢

Answer 1

You should have routes /tasks/type1 and /tasks/type2 defined in your Routes. You can design something like this :

//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>
.
.
.

Probably in your case, you want to re-render component based on type, something like this:

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> );
   }
}

更新：

When the component instance is rendered into DOM for the first time, React will call componentDidMount() if it is defined. This is the first time you have access to the DOM and child refs. Now the component instance is rendered and alive. It will live and update until it is unmounted.

ComponentDidMount will be called once if you are switching between routes having same component and just different params, your original component does not get unmount or remount. But instead receive new props. So, you could use the componentWillReceiveProps(newProps) function and look for newProps.params. This is the expected behaviour. Now, it depends how you want to go implementing routes. You can use different components for Type1 and Type2, if this is what you want.

URL 使用 React 时的路由问题

URL routing issue when using react

reactjs

react-router-dom