反应路由 URL答案

【问题标题】：React Route URL反应路由 URL
【发布时间】：2018-05-30 12:21:54
【问题描述】：

我是 React 新手。我正在使用react-router-dom。

import React from 'react';
import { Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/home';
import Login from './components/login';

class App extends React.Component {

constructor(props) {
    super(props);
}

render() {
    return (
        <div className="app">
          <Link to='/'>Home</Link>
          <Link to='/login'>Login</Link>
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/login' component={Login}/>
          </Switch>
        </div>
    );
  }
}
export default App;

我正在使用此代码一切正常，但是当我直接通过 de url 转到 localhost:8080/login 时，我收到错误 Cannot GET /login 但通过链接 <Link to='/login'>Login</Link> 运行良好。

我该如何解决？

【问题讨论】：

请查看此答案stackoverflow.com/questions/40332753/…
@ShubhamKhatri 差不多，但我发现了下一个问题，如何从http://localhost:8080/#/home 中删除#
不使用HashRouter，而是使用BrowserRouter

标签： reactjs react-router

【解决方案1】：

因此，在使用 react 导航时，这通常是我处理的一件棘手的事情。

通过直接导航到 /login 你的 React 应用程序实际上并没有呈现最高的父级或根，因此实际上没有一个登录组件可以找到和呈现。这是我在使用登录名和主页时所做的事情

<Route exact path="/" component={() => this.props.auth ? <DashboardContainer/> : <Redirect to="/" />}/>

这表示如果没有任何身份验证（或本地存储、cookie 或您用来登录它们的任何东西）重定向回家或 / 以便他们可以点击 /login。

基本上，您需要先虚拟安装最高级别的组件，然后才能执行其他任何操作。您还可以将 /login 设置为您的登录页面，因此在这种情况下合并 / 和 /login。但是上面的例子是模块化和动态的。

【讨论】：