如何在React上将索引路由重定向到自定义路由

Question

例如，我将如何重定向http://localhost:3000/自动到http://localhost:3000/dashboard加载时，没有任何身份验证控制器或任何类型的逻辑。只是从我运行"；npm运行开始"；。

import React from"；反应"；；进口{浏览器路由器作为路由器，路线转换重新使用}从"；反应路由器dom"；；

从"导入历史"/历史"；；

从"导入DashboardScreen"/components/screens/DashboardScreen"；；

class App extends React.Component {
render() {
return (
<Router history={history}>
<Switch>
<Route exact path='/'>
<Redirect to='/dashboard' component={DashboardScreen} />
</Route>
<Route exact path='/passwords' component={DashboardScreen} />
<Route exact path='/notes' component={DashboardScreen} />
<Route exact path='/addresses' component={DashboardScreen} />
</Switch>
</Router>
);
}
}
export default App;

Answer 1

您可以使用react-router-dom进行路由，您可以使用我的代码，例如：

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<Router>
<App />
</Router>
</StrictMode>,
rootElement
);

App.js

import { Switch, Route, Redirect } from "react-router-dom";
import "./styles.css";
export default function App() {
return (
<Switch>
<Route exact path="/">
<Redirect to="/dashboard" />
</Route>
<Route exact path="/dashboard">
<div>
<h1>This is Dashboard</h1>
</div>
</Route>
</Switch>
);
}

Answer 2

如果你正在使用react路由器，你可以尝试类似于的东西

<Route exact path="/" render={() => <Redirect to="/dashboard " />} 

Answer 3

您可以在普通js的帮助下尝试这样的操作，并且只对进行反应

const Redirect = ({to}) => window.location = to;