不确定如何在 Laravel 中路由到我的 React 视图答案

【问题标题】：Not sure how to route to my React views in Laravel不确定如何在 Laravel 中路由到我的 React 视图
【发布时间】：2020-10-27 14:43:11
【问题描述】：

我正在尝试通过 Laravel 路由到我的 react viewName.js 文件，但我不太确定如何完成此操作。我将通过侧边栏进行路由以从一个视图更改为另一个视图，但我不确定如何在 React 中设置路由路径。

我的 app.js

import React, { Component }from 'react';
import ReactDOM from 'react-dom';

// Layouts
import Header from '../components/layouts/Header';
import Sidebar from '../components/layouts/Sidebar';

// Views
import Repos from '../components/views/Repos';
import Hooks from '../components/views/Hooks';
import Issues from '../components/views/Issues';
import Members from '../components/views/Member';

class Index extends Component {
    render() {
    return (
        <div className="container">
            <Header />
            <Sidebar /> 
            <Repos />
            <Hooks />
            <Issues />
            <Member />
        </div>
        );
    }
}

export default Index;

if (document.getElementById('index')) {
    ReactDOM.render(<Index />, document.getElementById('index'));
}

我的网页.php

Route::view('/{path?}', 'welcome');

侧边栏

import React, {Component} from 'react'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
import { Link } from 'react-router-dom';

class Sidebar extends Component {

  render() {
    return (
      <List disablePadding dense style={styleSidebar}>
        <ListItem button>
          <ListItemText style={textStyle}>Repos</ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>Events</ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>Hooks</ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>Issues</ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>Members</ListItemText>
        </ListItem>
      </List>
    )
  }
}

【问题讨论】：

为您的问题添加更多详细信息
@krimo 我添加了更多细节
sidbar 在 react js 中？
@krimo 是的。我继续添加侧边栏代码

标签： reactjs laravel routes

【解决方案1】：

试试这个原理

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router> 
   <Link to="/Repos" >Repos</Link>
   <Link to="/Events" >Events</Link>
    {<Route  exact path="/Repos" component={Repos} />}
    {<Route  exact path="/Events" component={Events} />}
</Router>

【讨论】：

愚蠢的问题，我假设你的意思是在我的 app.js 中尝试这个？
你的意思@DevJ
把它放在侧边栏组件然后改变你想要的样式@DevJ
不幸的是抛出了一个错误“app.js:83461 Uncaught ReferenceError: Events is not defined”（例如）
在组件里放你每个页面的组件@DevJ

【解决方案2】：

像上面那个人写的那样使用路由器组件，索引渲染应该是这样的

你可以在这里看到我的索引文件 https://github.com/lidorMarko/SkiStore/blob/main/src/index.js

【讨论】：