Question

我在我的项目中有一个主要的细节设计，采用以下路线：本地主机：3000 / users（UserMasterComponent）本地主机：3000 /用户/注册（UserDetailComponent）

当我调用localhost：3000 / users / register时，浏览器将调用“ UserMasterComponent”，因此，它忽略了网址中的“ register”。

App.js

return (
    <Router>
      <div>
          <h2>Welcome to React Router Tutorial</h2>
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <ul className="navbar-nav mr-auto">
            <li><Link to={'/usuario'} className="nav-link">Usuario</Link></li>
            <li><Link to={'/usuario/cadastrar'} className="nav-link">About</Link></li>
          </ul>
          </nav>
          <hr />
          <Switch>
              <Route path='/usuario' component={UsuarioList} />
              <Route path='/usuario/cadastrar' component={UsuarioDetail} />
          </Switch>
        </div>
    </Router>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

Answer 1

由于您使用的是来自React Router的Switch，因此选择的路径将是第一个满足path的路径。

您要发送的是/usuario/cadastrar和第一个选项：

<Route path='/usuario' component={UsuarioList} />

将接受此。您缺少的是exact。所以试试这个：

      <Switch>
          <Route exact path='/usuario' component={UsuarioList} />
          <Route path='/usuario/cadastrar' component={UsuarioDetail} />
      </Switch>

有关启动React Router check this out

的参考

反应路由问题

1 个答案: