路由在reactjs应用程序中不起作用答案

【问题标题】：Routing not working in reactjs application路由在reactjs应用程序中不起作用
【发布时间】：2023-07-04 06:17:01
【问题描述】：

我创建了一个包含三个页面（组件）的 reactjs 应用程序，应用程序、登录和注册，我需要通过在浏览器中输入 url 来从一个页面导航到另一个页面，但导航对我不起作用。输入任何网址只会显示“应用”页面。

以下是我在应用程序的 main.js 文件中编写的代码，我用来导航的 url 类似于 http://localhost:8080/#/login 或 http://localhost:8080/#/reg

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, NavLink, Redirect, Switch, hashHistory} from 'react-router-dom'
import App from './../jsx/App.jsx';
import Login from './../jsx/Login.jsx';
import Register from './../jsx/Register.jsx';

ReactDOM.render((
     <Router history={hashHistory}>
        <div>
            <Route path="/" component={App}/>
            <Route path="/login" component={Login}/>
            <Route path="/reg" component={Register}/>
        </div>
    </Router>

), document.getElementById('app'))

【问题讨论】：

标签： reactjs react-router react-jsx

【解决方案1】：

您需要配置路由以完全匹配根路径。试试这个...

<Route exact path="/" component={App}/>

【讨论】：

【解决方案2】：

从路径路径中的路径中删除 /

<Route path="/login" component={Login}/>
            <Route path="/reg" component={Register}/>

试试这个对我有用

入门类

import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './Component/Layout.jsx';
import { Router, Route, IndexRoute, hashHistory } from "react-router";

import Archives from './Component/Archives.jsx';
import Settings from './Component/Settings.jsx';

import Featured from './Component/Featured.jsx';

ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}> 
//<IndexRoute component={Featured}></IndexRoute>
<Route path="archives" name="archives" component={Archives}></Route>
<Route path="settings" component={Settings}></Route>
<Route path="featured" component={Featured}></Route>
</Route>
</Router>,
document.getElementById('app'));

Layout class
{
render{

return(
<div>
      {this.props.children}
      <ul>
       <li><Link to="archives">archives</Link></li>
         <li><Link to="settings">settings</Link></li>
         <li><Link to="featured">featured</Link></li>
         </ul>

</div>

);
}


}

【讨论】：

【解决方案3】：

如果您使用的是 react 路由器 4，那看起来不错。但是，您可以尝试使用如下所示的：

<BrowserRouter>
    <Switch>
      <Route path="/" component={Home} />
    </Switch>
</BrowserRouter>

这是最新版本的 react。 Home组件如下：

 render() {
    return (
        <div>
            <p>Header Section</p>
            <Header/>
            <p>Home component</p>
            <Link to="/search">search</Link>
            <Route path="/search" component={Search}/>
        </div>
    );
}

所以很可能您需要做的就是添加一个开关。其他解决方案也是可能的。希望这会有所帮助:)

【讨论】：

【解决方案4】：

使用 BrowserRouter 并从 'react-router-dom' 切换如果您使用 BrowserRouter，则无需将历史记录作为道具传递，因为它会自行处理。

试试这个。

<Router>
        <Switch>
            <Route exact path="/" component={App}/>
            <Route exact path="/login" component={Login}/>
            <Route exact path="/reg" component={Register}/>
        </Switch>
</Router>

【讨论】：