React: Video displaying in <video> but not downloadable in <a> - javascript

I'm developing a React app for editing videos and I'm having a little trouble with the download functionality. The backend is a Node/Express app on localhost:3001 - this is where the video gets saved. The React frontend is being developed on localhost:3000 (with the proxy getting set in package.json for communication between the ports).
Everything works great until I get to the final component:
// ViewVideoPage.js
import React from 'react';
export default (props) => {
return (
<div>
<video controls preload src={props.outputFile}></video>
<a href={props.outputFile} download>Download Video</a>
</div>
)
}
props.outputFile === './outputFile.mp4'
The video renders perfectly. I can watch the video fine.
When trying to download, Chrome gives me the download prompt but says "Failed - No File".
So I can watch the video fine, but I can't download it for some reason. I can also go to localhost:3001/outputFile.mp4 and view it. Going to localhost:3000/outputFile.mp4 just shows my React template though (I expect the issue has to do with this).
Here's App.js if it helps:
import React, {Component} from 'react';
import {Router, Switch, Route} from 'react-router-dom';
import history from './History.js';
import UploadPage from './UploadPage.js';
import ViewVideoPage from './ViewVideoPage.js';
import WordEditPage from './WordEditPage.js';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.handleConfirmWords = this.handleConfirmWords.bind(this);
this.handleStartOver = this.handleStartOver.bind(this);
this.handleVideoSubmission = this.handleVideoSubmission.bind(this);
}
// ...helper functions...
render() {
return (
<div>
<h1>Video Editor</h1>
<Router history={history}>
<Switch>
<Route exact path="/" render={() => (
<UploadPage handleVideoSubmission={this.handleVideoSubmission}/>
)}/>
<Route path="/edit-words" render={() => (
<WordEditPage handleConfirmWords={this.handleConfirmWords} words={this.state.videoDetails.words}/>
)}/>
<Route path="/view-video" render={() => (
<ViewVideoPage outputFile={this.state.videoDetails.files.output}/>
)}/>
</Switch>
</Router>
<button onClick={this.handleStartOver}>Start Over</button>
</div>
);
}
}
export default App;
Thank you for taking a look! Let me know if there's any more information that I can provide that would be useful.

Related

React js project on GitHub pages not showing [duplicate]

This question already has answers here:
React Router not working with Github Pages
(4 answers)
Closed 4 months ago.
I published my React project to GitHub pages and while I can see the favicon and main page title the actual project page is blank (nothing shows).
I tried most fixes I could find but nothing worked.
This is my App.JS:
import {BrowserRouter} from "react-router-dom";
import Pages from "./pages/Pages";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<BrowserRouter>
<Pages/>
</BrowserRouter>
</div>
);
}
export default App;
and this is my Page routes:
import React from "react";
import { Route, Routes } from "react-router-dom";
import MainPage from "../components/MainPage";
import SpaceProFigGridDetails from "../components/SpaceProFigGridDetails";
import SpaceProMain from "../components/SpaceProMain";
import SpaceProSpaceGDetails from "../components/SpaceProSpaceGDetails";
function Pages() {
return (
<Routes>
<Route path="/" element={<MainPage />} />
<Route path="/spaceProMain" element={<SpaceProMain />} />
<Route
path="/spaceprospacegdetails/:image"
element={<SpaceProSpaceGDetails />}
/>
<Route
path="/spaceprofiggriddetails/:id"
element={<SpaceProFigGridDetails />}
/>
</Routes>
);
}
export default Pages;
I read here (a different post) to add this to your project, however I might not be doing it correctly:
<BrowserRouter basename={process.env.PUBLIC_URL}>
{/* routes */}
If this solutions still works, can someone clarify pls?
where exactly should I paste it? I tried on APPjs but my localhost "view" cashes.
You can see my project repository here
Thanks everyone for your help!
Cheers!
Thanks everyone for trying to help!
I really appreciate everyone who shared ideas to help me fix this error.
After hourssssss working on this issue I found the solution.
Instead of:
import {BrowserRouter} from "react-router-dom";
import Pages from "./pages/Pages";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<BrowserRouter>
<Pages/>
</BrowserRouter>
</div>
);
}
export default App;
THIS SOLVED THE ISSUE:
import {HashRouter} from "react-router-dom";
import Pages from "./pages/Pages";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<HashRouter>
<Pages/>
</HashRouter>
</div>
);
}
export default App;

"You should not use <Link> outside a <Router>" Issue in Nested Routes

I've seen a similar question, but I unfortunately still have a bug in my code that I cannot seem to solve :(
My react-router-dom version is 5.2.0, and my react version 17.0.2.
I'm in the process of building a more complex React app, but I'm also able to replicate the bug with the simple code below. I've basically stripped everything out of the application except a <Test /> component.
Here's my App.js file, where I'm employing React-Router and have a single route for '/test'. At that route, I'm rendering my <Test /> component, then also using React-Router's <Link /> component. This works perfectly fine! Code below for both my App.js and Test.js files is below.
App.js:
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Test from './components/Test';
const App = () => (
<Router>
<Switch>
<Route exact path='/test'>
<Test />
<Link to='/' className='text-white'>
Go back home
</Link>
</Route>
</Switch>
</Router>
);
export default App;
Test.js
import React from 'react';
const Test = () => {
return (
<>
<h1 className='text-white'>Hello, world</h1>
</>
);
};
export default Test;
My bug occurs when I try to bring Link from react-router-dom into my <Test /> component. For example, I'm trying to do this:
Test.js
import React from 'react';
import { Link } from 'react-router-dom';
const Test = () => {
return (
<>
<h1 className='text-white'>Hello, world</h1>
<Link to='/' className='text-white'>
Go back home
</Link>
</>
);
};
export default Test;
But whenever I visit /test (i.e. http://localhost:3000/test), my application breaks and I see "Error: Invariant failed: You should not use Link outside a Router." Screenshot below:
I thought I had found an answer here, but I don't understand what it means to import or export from my bundle.
Any and all help is greatly appreciated! This has been a huge roadblock in my application as I'm trying to use React-Router's <Link /> component inside of other components rendered within the <Switch />.
Try to put this in the Route prop render:
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Test from './components/Test';
const App = () => (
<Router>
<Switch>
<Route
exact
path="/test"
render={() => ( // look at this
<>
<Test />
<Link to="/" className="text-white">
Go back home
</Link>
</>
)}
/>
</Switch>
</Router>
);
export default App;
I was able to fix the bug by just deleting my node_modules directory and then re-installing all of the required packages with npm install! The nested <Link /> component now works as expected.

ReactJS render html for different pages

I have a react.js site created using: https://facebook.github.io/create-react-app/docs/getting-started with the npx create-react-app my-app command. I got many pages in my app and when I open the rendered source code in google chrome after building the site. The problem is all pages are in one bundle.js including all text and HTML elements of all pages are in that file combined. Does someone know how to get the HTML rendered in the source code for all pages individually instead of having just a bundle.js for all pages content?
So the other pages can get indexed individually by google?
I hope someone knows how to get this working. If there is an npm plugin or an example site available please post the link. I really can't find a solution for weeks now, I just see a bundle.js in the exported HTML file that includes all text and images and HTML elements of all pages how can I have it rendered as html output instead of just all in one bundle.js for indexing purposes?
By the way: my app uses 'react-router-dom' I don't want to break, the routing of the pages but having the pages being indexable individually.
Below is a sample code
App.js
//App.js
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Nav from './components/nav';
import Header from './components/header';
import Footer from './components/footer';
import home from './components/pages/home';
import about from './components/pages/about';
import contact from './components/pages/contact';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Nav/>
<Header/>
<Route exact path="/" component={home} />
<Route exact path="/about" component={about} />
<Route exact path="/contact" component={contact} />
<Footer/>
</div>
</Router>
);
}
}
export default App;
home.js
//home.js
import React, { Component } from 'react';
class home extends Component {
render() {
return (
<div className="container">
<p>content...</p>
</div>
);
}
}
export default home;

React Router v4 Multiple Dynamic Routes

I'm new to React Router so if this has been asked before maybe someone could point me in the right direction! Basically I have a WordPress install that I'm pulling in my websites data from through the API.
I've created custom routes to query my pages and my posts by slug.
Using react router I was able to create a template called Page.js which changes dynamically using the code below.
However, now I'm trying to do the same exact thing with the blog posts but the app isn't using Blog.js its still defaulting back to Page.js
here's my App.js code...
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from './pages/Home';
import Page from './pages/Page';
import Blog from './pages/Blog';
import Header from './components/Header';
import Footer from './components/Footer';
class App extends React.Component {
render() {
return (
<Router>
<div>
<Header/>
<Route exact path="/" component={Home} />
<Route path="/:slug" component={Page} />
<Route path="/blog/:slug" component={Blog} />
<Footer/>
</div>
</Router>
);
}
}
export default App;
More Details:
Page.js works by checking const { slug } = this.props.match.params; and then querying WordPress using that slug to pull in the data it needs. In componentDidUpdate i'm checking prevProps to see if the slug matches the previous slug, if not it fetching the new data.
This works great and I was hoping to do the same in the Blog.js as well.
However, if this isn't the best approach please advise another method.
Two things:
Use element: This will allow only one route to be used, no composing. (See this documentation)
Check the order of path statements: Use defined paths before :param, this avoids considering /blog/:slug as a /:slug parameter.
`
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
class App extends React.Component {
render() {
return (
<Router>
<div>
<Header/>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/blog/:slug" component={Blog} />
<Route path="/:slug" component={Page} />
</Switch>
<Footer/>
</div>
</Router>
);
}
}
I think you're pretty close to the recommended implementation, just a few small tweaks should get you there.
First,
In your App.js file you're actually handling routing, without using the <Switch> component provided by React Router, replacing the <div> and </div> tags in your App.js file with <Switch> and </Switch> respectively should get this working for you. See below...
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; //make sure you import it also!
import Home from './pages/Home';
import Page from './pages/Page';
import Blog from './pages/Blog';
import Header from './components/Header';
import Footer from './components/Footer';
class App extends React.Component {
render() {
return (
<Router>
<Switch> //Add this in
<Header />
<Route exact path="/" component={Home} />
<Route path="/blog/:slug" component={Blog} />
<Route path="/:slug" component={Page} />
<Footer />
</Switch> //Add this in
</Router>
);
}
}
export default App;
I would recommend going further though!
To make these components more understandable, you should refactor routing functionality into a routes.js file, and top-level App component logic/structure into the App.js file. See below...
In App.js:
This file is where you should handle your base application structure and logic. For example this file is where you'll import your <Header>, your <Footer>, and where the Route component will render.
import * as React from 'react'
import Header from './../Header/Header.jsx'
import Footer from './../Footer/Footer.jsx'
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
// Handle your top-level application state here
}
}
// define your top-level application functions here
render() {
return (
<div>
<Header />
<main>
{this.props.children} //This where the Route components will render
</main>
<Footer />
</div>
)
}
}
export default App
In Routes.js:
This file is where you should import your App component, and then handle the routing statements.
import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import App from './components/App'
import Home from './pages/Home'
import Page from './pages/Page'
import Blog from './pages/Blog'
/* construct routes */
export default () => {
return (
<Router>
<App>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/blog/:slug' component={Blog} />
<Route path='/:slug' component={Page} />
</Switch>
</App>
</Router>
)
}
If you structure your application this way, your routing logic and top-level application logic are separate, and in the end your files will be less cluttered as both Route files and top-level App files can get fairly dense.
Hope this helps! Let me know if I can explain anything further.

issue with react-router showing component when not in route

I am using react-router and having some difficulties with it's behaviour.
The Nav shows on all pages as desired. However, the Profile shows on all pages too. I only want to show this on /home and also on the /music and /players pages, which it does. However, it also shows on the /charts page which is confusing me.
My code looks like the following.
import React from 'react';
import { Route } from 'react-router-dom'
import Nav from './components/Nav'
import Profile from './components/Profile'
import Players from './components/Players'
import Music from './components/Music'
import Charts from './components/Charts'
const App = () => {
return (
<section>
<Nav />
<Route path="/home">
<div>
<Profile avatarUrl={ avatarUrl }/>
<Route path="/players" component={Players}/>
<Route path="/music" component={Music}/>
</div>
</Route>
<Route path="/charts" component={Charts}/>
</section>
)
}
export default App;
I have read through the docs, tried putting in a Switch component, added exact to the home route but this leads to other unexpected behaviour.
Can anyone advise what I am doing wrong?
Thanks Pete!
Try this:
import React from 'react';
import { Route, BrowserRouter as Router } from 'react-router-dom'
import Nav from './components/Nav'
import Profile from './components/Profile'
import Players from './components/Players'
import Music from './components/Music'
import Charts from './components/Charts'
const Home = ({match}) => {
return (
<div>
<Profile avatarUrl={ avatarUrl }/>
<Route path=`${match.url}/players` component={Players}/>
<Route path=`${match.url}/music` component={Music}/>
</div>
);
};
const App = () => {
return (
<section>
<Nav />
<Router>
<Switch>
<Route path="/charts" exact={true} component={Charts}/>
<Route path="/home" component={Home} />
</Switch>
</Router>
</section>
)
}
export default App;
I haven't tested this, but this should work.
Assuming that you're using react-router v4, I don't know if you can actually use your home route in the way you've used it.
In the code above, Switch basically renders the first match between the routes specified under it. The exact keyword will ensure that only /charts path will display the Charts component.
The Home component will render in any path that starts with /home.
Now, for path /home/players, you'll see the Profile and the Players component, whereas for path /home/music, you'll see the other combination.
Hope this helps. :)
Edit:
Added Router to the code.
Edit:
Working code available here: https://codesandbox.io/s/8x9pql9m19
Change route on right hand side to:
/home
/home/players
/home/music
/charts

Categories