javascript - 我应该如何构建路由以使其工作？

Question

我从 React 开始，创建一个简单的页面用户，我想在它和主页之间导航

| index.js
| components
|     App.js
|     Users.js
|     Home.js
|     Header.js

这就是我定义的结构：

页眉.js：

<header>
   <BrowserRouter>
      <Link to="/users">Users</Link>
    </BrowserRouter>
</header>

应用程序.js：

< div >
     <Router>
          <Header />
           <Switch>
               <Route exact path="/" component={Home} />
                <Route path="/users" component={Users} />
            </Switch>
     </Router>
 </div>

索引.js：

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

它不起作用，如果我单击<Link to='users' />不起作用，但输入 URLlocalhost:3000/users页面将被重定向。

解决方案

从<BrowserRouter>_Link

<header>

      <Link to="/users">Users</Link>
</header>

标签： javascriptreactjs

Answer 1

更改您的代码如下

                <BrowserRouter>
                    <Switch>
                        <Route path="/" exact component={Home}/>
                        <Route path="/usuarios" exact component={Users}/>
                    </Switch>
                </BrowserRouter>
           


import {Link} from "react-router-dom";
import Users from './Users';
class Header extends Component {
    render() {
        return (
            <header>
                 <div className="links">
                    <nav>
                        <ul>
                            <li><Link to="/usuarios">Users</Link></li>
                        </ul>
                    </nav>
                </div>
            </header>
)
}}

官方文档