时间戳

首页 > 解决方案 > 反应路由问题

reactjs - 反应路由问题

问题描述

我的项目中有一个主要的详细设计，使用以下路线： localhost:3000/users (UserMasterComponent) localhost:3000/users/register (UserDetailComponent)

当我调用 localhost:3000/users/register 时，浏览器调用“UserMasterComponent”，因此，它忽略了 url 处的“注册”。

应用程序.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();

标签： reactjs

解决方案

Since you are using a Switch from React Router, the path chosen will be the first one that satisfies the path.

In your case you are sending /usuario/cadastrar and the first option:

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

will accept this. What you are missing is the exact. So try this: 

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

For a good reference on starting with react router check this out

推荐阅读