Question

嗨，我到处都在搜寻关于我的问题的信息，但对我来说还是没有运气。在这里，我附上了我的示例代码。

import React from 'react';
import {
  BrowserRouter,
  Route,
  Switch,
  NavLink,
  Redirect
} from "react-router-dom";

const Login = () => <div> Login Content <NavLink to ="/AppHome"> go to App</NavLink> </div>;

const Register = () => <div> Register Content </div>;

const AppHome = () => <div> Welcome to the App </div>;

class Authenticate extends React.Component {
  render() {
    return ( 
      <>
        <div>
          <NavLink to={"/Login"}> Login </NavLink> 
          <NavLink to = {"/Register"} > Register < /NavLink> 
        </div> 
        <div>
          <Switch >
           <Route path={"/"} component={Login} />
           <Route path={"/Login"} component={Login}/> 
           <Route path={"/Register"} component = {Register}/>
          </Switch> 
        </div>
      </>
    );
  }
}

class App extends React.Component {
  render() {
    return ( 
      <BrowserRouter >
        <Switch >
         <Route path="/" component={Authenticate}/> 
         <Route path="/AppHome" component={AppHome}/> 
        </Switch> 
      </BrowserRouter>
    )
  }
}

export default App;

在这里，在Localhost:3000中，我将登录Component设置为默认显示。它显示了视图，但是当单击注册链接时，URL仅更改了视图。我做错了什么？

Answer 1

您正在尝试嵌套路线，但就您而言，这似乎是不必要的。

我将这样设置路由，而无需嵌套路由：

import React from "react";
import {
  BrowserRouter,
  Route,
  Switch,
  NavLink,
  Redirect
} from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Authenticate />
        <Switch>
          <Route path="/" exact component={Login} />
          <Route path="/Login" component={Login} />
          <Route path="/Register" component={Register} />
          <Route path="/AppHome" component={AppHome} />
        </Switch>
      </BrowserRouter>
    );
  }
}

const Login = () => (
  <div>
    Login Content <NavLink to="/AppHome"> go to App</NavLink>
  </div>
);

const Register = () => <div> Register Content </div>;

const AppHome = () => <div> Welcome to the App </div>;

class Authenticate extends React.Component {
  render() {
    return (
      <>
        <div>
          <NavLink to={"/Login"}> Login </NavLink>
          <NavLink to={"/Register"}> Register </NavLink>
        </div>
      </>
    );
  }
}

export default App;

Codesandbox

Answer 2

import React from 'react'
import ReactDOM from 'react-dom'
import {HashRouter, Route, Switch, NavLink} from 'react-router-dom'

class App extends React.Component {
  render() {
    return (
      <HashRouter>
        <Switch>
          <Route path="/Login" component={Login} />
          <Route path="/Register" component={Register} />
          <Route path="/" component={AppHome} />
        </Switch>
      </HashRouter>
    )
  }
}

const Login = () => (
  <div>
    Login Content <NavLink to="/AppHome"> go to App</NavLink>
  </div>
)

const Register = () => <div> Register Content </div>

const AppHome = () => <div> Welcome to the App </div>

export default App

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

请您一次检查一次Codesandbox。

React Router Links获得更改，但视图未更改

2 个答案: