主页 / 问题 / 903517
Accepted
Igor
Asked:2020-11-07 22:47:38 +0000 UTC2020-11-07 22:47:38 +0000 UTC

如何通过在地址栏中输入地址来在 react-router 中呈现所需的路由器？

  • 772

不幸的是，即使在这里，即使在 codepen 上，我也不知道如何演示这项工作react-router，所以我将尝试按原样解释它。

这是代码的样子：

import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter} from 'react-router-dom';

import {Link, Route, Switch} from 'react-router-dom';
const Home = () => <p>Home page</p>;
const Search = () => <p>Search page</p>;

const App = () => (
    <div>
        <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/search">Search</Link></li>
        </ul>

        <hr />

        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/search" component={Search} />
        </Switch>

    </div>
);

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script>

结果如下所示：

在此处输入图像描述

我点击链接，去你想去的地方，一切正常。

但是，如果我想在地址栏中输入相同的路径：/search

在此处输入图像描述 在此处输入图像描述

这不起作用。

如何react-router从地址栏正确转换到所需的路由器

reactjs

1 个回答

  1. Best Answer

    您需要配置您的服务器，以便在您请求地址时，它总是发出index.html

    对于nginx：

    location / {
  try_files $uri /index.html;
}

    原始答案

    • 0

相关问题