Question

我使用的是反应路由器1.0.0-rc1和redux。

这是路线：

<Route path=""component={Body}>
    <Route path="machines/:id" component={SingleMachineView}/>
    <IndexRoute component={Dashboard}/>
    <Route path="*" component={Dashboard}/>
</Route>

这是链接：

<Link to={`machines/${machine.machine_id}`}> 
  {machine.name} 
</Link>

这是路由器的启动方式：

class Root extends React.Component {

  render() {

    const history = createHashHistory();

    return (
      <Provider store={store}>
        {() => <Router history={history} children={Routes}/>}
      </Provider>
    );
  }
}

ReactDOM.render(<Root/>, document.getElementById('app'));

一切都按预期工作，但当我点击链接并呈现新视图时，我仍然在控制台中收到错误消息：

Warning: Location "machines/id2" did not match any routes

当我使用路径localhost:8080/#/machines/id2

加载应用时，也不会显示错误消息

Answer 1

问题是该链接以/：

开头

<Link to={`/machines/${machine.machine_id}`}> 
  {machine.name} 
</Link>

Answer 2

在我使用路由器时，路由器或浏览器会在评论中添加示例中的前导/。

我建议您使用route而不是空字符串创建根/：

<Route path="/"component={Body}>
    <Route path="machines/:id" component={SingleMachineView}/>
    <IndexRoute component={Dashboard}/>
    <Route path="*" component={Dashboard}/>
</Route>

React Router路由但显示错误消息

2 个答案: