React Router路由但显示错误消息

Question

我正在使用 React 路由器 1.0.0-rc1 和 redux。

这是路线：

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

这是 link:

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

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

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

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

加载应用程序时，错误消息也不会出现

Answer 1

在我使用路由器的过程中，路由器或浏览器添加了一个前导 /，就像您在评论中的示例一样。

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

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

Answer 2

问题是 link 以 /:

开头

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

React Router路由但显示错误消息

React Router routes but show error message

reactjs

react-router