我正在将ReactJS与ASP.Net Core后端一起使用，并且正在尝试实现HashRouter。当我从Login页面移至管理页面时，浏览器将呈现“管理”页面，并在几毫秒后返回到“登录”页面。
以前，我已经删除了Startup.cs文件中的所有路由逻辑，但仍然无法正常工作。
Startup.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
namespace LicenseManager
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/build";
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller}/{action=index}/{id?}");
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "Index" });
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
}
}
}
Login.js
import React, { Component } from 'react';
import './Login.css'
import logo from '../../images/logo.png'
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
}
grabUsername = () => {
this.setState({ username: this.username.value });
}
grabPassword = () => {
this.setState({ password: this.password.value });
}
authenticateUser = () => {
this.props.history.push("/Management");
}
render() {
return (
<div className="container pt-5">
<h1 className='text-center'><img src={logo} alt='logo' />Topaz License Manager</h1>
<div className="row">
<div className="col-md-6 mx-auto bg-light mt-3 p-5 rounded">
<form>
<fieldset>
<legend>Sign In</legend>
<div className="form-group">
<label htmlFor="username">Username</label>
<input ref={username => this.username = username} onChange={this.grabUsername} type="text" className="form-control" id="username" placeholder="Enter email" required />
<small id="usernameHelp" className="form-text text-muted">We'll never share your confidential information with anyone else.</small>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input ref={password => this.password = password} onChange={this.grabPassword} type="password" className="form-control" id="password" placeholder="Password" required />
</div>
<button type="submit" className="btn btn-primary" onClick={this.authenticateUser}>Submit</button>
</fieldset>
</form>
</div>
</div>
</div>
);
}
}
export default Login;
Management.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './Management.css';
import { HashRouter, Route, Switch, Link } from 'react-router-dom';
import ViewAllCustomers from '../Customer/ViewAll/ViewAllCustomers';
import AddCustomer from '../Customer/Add/AddCustomer';
import UpdateCustomer from '../Customer/Update/UpdateCustomer';
import DeleteCustomer from '../Customer/Delete/DeleteCustomer';
class Management extends Component {
constructor() {
super();
this.state = {
sidebarToggleClosed: false,
}
this.activateSidebarClosed = this.activateSidebarClosed.bind(this);
}
activateSidebarClosed(){
this.setState({ activateToggleClosed: !this.state.sidebarToggleClosed });
var sidebarToggleClass = ReactDOM.findDOMNode(this.refs.sidebar);
sidebarToggleClass.classList.toggle('active');
}
render() {
return (
<HashRouter>
<div>
<div className="wrapper">
{/* <!-- Sidebar --> */}
<nav ref="sidebar" id="sidebar">
<div className="sidebar-header">
<h3>TOPAZ<br />License Manager</h3>
<strong className="font-weight-normal">TZ</strong>
</div>
<ul className="list-unstyled components">
<li className="">
<a href="#analytics" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<i className="fas fa-chart-bar"></i>
ANALYTICS
</a>
<ul className="collapse list-unstyled" id="analytics">
<li>
<a href="#">Home 1</a>
</li>
<li>
<a href="#">Home 2</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
<li>
<a href="#customer" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<i className="fas fa-user"></i>
CUSTOMER
</a>
<ul className="collapse list-unstyled" id="customer">
<li>
<Link to="/Management/Customer/ViewAll">View All</Link>
</li>
<li>
<Link to="/Management/Customer/Add">Add</Link>
</li>
<li>
<Link to="/Management/Customer/Update">Update</Link>
</li>
<li>
<Link to="/Management/Customer/Delete">Delete</Link>
</li>
</ul>
</li>
<li>
<a href="#" >
<i className="fas fa-book-open"></i>
LIBRARY
</a>
<a href="#book" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
<i className="fas fa-book"></i>
BOOK
</a>
<ul className="collapse list-unstyled" id="book">
<li>
<a>View All</a>
</li>
<li>
<a>Add</a>
</li>
<li>
<a>Update</a>
</li>
<li>
<a>Delete</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i className="fas fa-briefcase"></i>
STAFF
</a>
</li>
<li>
<a href="#">
<i className="fas fa-question"></i>
FAQ
</a>
</li>
<li>
<a href="#">
<i className="fas fa-paper-plane"></i>
CONTACT
</a>
</li>
</ul>
<ul className="list-unstyled CTAs">
<li>
<a href="https://bootstrapious.com/tutorial/files/sidebar.zip" className="download">Download source</a>
</li>
<li>
<a href="https://bootstrapious.com/p/bootstrap-sidebar" className="article">Back to article</a>
</li>
</ul>
</nav>
<div id="content">
<nav className="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
<div className="container-fluid">
<button type="button" id="sidebarCollapse" className="btn btn-primary" onClick={this.activateSidebarClosed}>
<i className="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
<button className="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i className="fas fa-align-justify"></i>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href="#"><label>Logout</label></a>
</li>
</ul>
</div>
</div>
</nav>
<Switch>
<Route exact path="/Management/Customer/ViewAll" component={ViewAllCustomers} />
<Route exact path="/Management/Customer/Add" component={AddCustomer} />
<Route exact path="/Management/Customer/Update" component={UpdateCustomer} />
<Route exact path="/Management/Customer/Delete" component={DeleteCustomer} />
</Switch>
</div>
</div>
</div>
</HashRouter>
);
}
}
export default Management;